<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-08 14:55:13
 * @LastEditTime: 2020-04-17 17:16:25
 * @LastEditors: Please set LastEditors
 -->
<template>
    <div id="contextBodyTaskPcNew">
        <div
            id="childrenNode"
            class="modeRight2"
            style="z-index: 9"
            v-if="isPre && !this.disabledAllBtn"
        >
            <!-- <div id="" class="nodeText"  @click="addChildrenStep"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''">
              <span class="menuSpan">添加子步骤</span>
          </div> -->
            <div
                id=""
                class="nodeText"
                @click="deleteStep"
                v-if="
                    currentNode && currentNode.nodeType != 'start' && currentNode.nodeType != 'stop'
                "
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">删除该步骤</span>
            </div>
            <div
                id=""
                class="nodeText"
                @click="removeFrameNode(inFrame(currentNode), 'req')"
                v-if="currentNode && canRemove(currentNode)"
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">移出分类</span>
            </div>
            <div
                id=""
                class="nodeText"
                @click="showFrameNodeModal"
                v-if="
                    currentNode &&
                    !inFrame(currentNode) &&
                    currentNode.nodeType != 'start' &&
                    currentNode.nodeType != 'stop' &&
                    frameList.length > 0
                "
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">加入分类</span>
            </div>
        </div>
        <div
            id="linePanel"
            class="modeRight2"
            style="z-index: 9"
            v-if="isPre && !this.disabledAllBtn"
        >
            <div
                id=""
                class="nodeText"
                @click="deleteLine(currentNode.id, currentNode)"
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">删除该连线</span>
            </div>
        </div>
        <div
            id="stopPanel"
            class="modeRight2"
            style="z-index: 9"
            v-if="isPre && !this.disabledAllBtn"
        >
            <div
                id=""
                class="nodeText"
                @click="deleteStep"
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">删除该节点</span>
            </div>
        </div>
        <div
            id="containerMangeMenu"
            class="modeRight2"
            style="z-index: 9"
            v-if="isPre && !this.disabledAllBtn"
        >
            <div
                id=""
                class="nodeText"
                @click="delProcessFrame"
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">删除该分类</span>
            </div>
        </div>
        <div
            id="groupMangeMenu"
            class="modeRight2"
            style="z-index: 9"
            v-if="isPre && !this.disabledAllBtn"
        >
            <div
                id=""
                class="nodeText"
                @click="openFrameModal()"
                onMouseMove="this.style.backgroundColor='#c5e7f6'"
                onMouseOut="this.style.backgroundColor=''"
            >
                <span class="menuSpan">创建分类</span>
            </div>
            <!-- <div id="" class="nodeText" @click="showFrameNodeModal('multi')"
                  onMouseMove="this.style.backgroundColor='#c5e7f6'"
                  onMouseOut="this.style.backgroundColor=''">
              <span class="menuSpan">加入分类</span>
          </div> -->
        </div>
        <div id="pauseResverPanel" class="modeRight2" style="z-index: 9"></div>

        <!-- 左侧功能区  v-if="taskStatusBol" -->
        <div
            v-if="isPre && !this.disabledAllBtn"
            style="position: absolute; width: 46px; background: #ffffff"
        >
            <Divider />
            <!-- 拖动 -->
            <div
                @click="listenTopoStatusChange('drag')"
                style="height: 36px; line-height: 36px; cursor: pointer; text-align: center"
            >
                <img
                    v-if="lineType === 'drag'"
                    src="@/assets/processControl/td_blue.png"
                    style="vertical-align: middle"
                />
                <img
                    v-if="lineType !== 'drag'"
                    src="@/assets/processControl/td_hui.png"
                    style="vertical-align: middle"
                />
            </div>
            <Divider />
            <!-- 连线 -->
            <div
                @click="listenTopoStatusChange('line')"
                title="连线"
                style="height: 36px; line-height: 36px; cursor: pointer; text-align: center"
            >
                <img
                    v-if="lineType === 'line'"
                    src="@/assets/processControl/lx_blue.png"
                    style="vertical-align: middle"
                />
                <img
                    v-if="lineType !== 'line'"
                    src="@/assets/processControl/lx_hui.png"
                    style="vertical-align: middle"
                />
            </div>
            <!-- 框选 -->
            <div
                @click="listenTopoStatusChange('select')"
                title="分类"
                style="height: 36px; line-height: 36px; cursor: pointer; text-align: center"
            >
                <Icon
                    type="ios-qr-scanner"
                    :size="20"
                    :style="{
                        color: lineType === 'select' ? '#2d8cf0' : '#666',
                        fontWeight: 'bold',
                    }"
                />
                <!-- <img  v-if="lineType === 'select'"  src="@/assets/processControl/lx_blue.png" style="vertical-align:middle;"/>
          <img  v-if="lineType !== 'select'" src="@/assets/processControl/lx_hui.png" style="vertical-align:middle;"/> -->
            </div>
            <!-- <Divider />
      <div style="height: 36px; line-height: 36px;cursor: pointer;">
        <img src="@/assets/processControl/cx_hui.png" alt="" />
      </div>
      <Divider />
      <div style="height: 36px; line-height: 36px">
        <img src="@/assets/processControl/fcs_hui.png" alt="" />
      </div>
      <Divider />
      <div style="height: 38px; line-height: 38px">
        <img src="@/assets/processControl/sc_hui.png" alt="" />
      </div>
      <Divider />
      <div style="height: 36px; line-height: 36px">
        <img src="@/assets/processControl/fd_hui.png" alt="" />
      </div>
      <Divider />
      <div style="height: 36px; line-height: 36px">
        <img src="@/assets/processControl/sx_hui.png" alt="" />
      </div>
      <Divider /> -->
        </div>
        <!-- 所有任务右侧中间部分 v-if="picturePanel" -->
        <div class="rightTaskZone" v-if="isPre && !this.disabledAllBtn">
            <!-- <div class="rightNav activeRightNav" @click="openAllTaskPanel">所有任务</div> -->
            <div
                class="rightNav"
                @dragover.prevent
                @dragstart="dragTaskTypeConfigSingle($event, 'dataType', 'p')"
                @dragend="dragend"
                draggable="true"
                style="margin: 8px 0px; cursor: pointer"
            >
                <img src="@/assets/processControl/dcxrw_hui.png" class="dragImage" />
                <span style="display: inline-block; width: 100%; text-align: center">单次型</span>
            </div>
            <!-- <div class="rightNav" v-if="processStatus !=='r' && processStatus !=='p' " @dragover.prevent @dragstart="dragTaskTypeDataPers($event,'dataType','p')" @dragend="dragend" draggable="true" style="margin:8px 0px;cursor:pointer">
          <img src="@/assets/processControl/cxxrw_hui.png" class="dragImage" />
          <span style="display:inline-block;width:100%;text-align:center">持续型</span>
      </div> -->
        </div>
        <canvas
            id="drawCanvasTeaskNew"
            width=""
            height=""
            ref="drawCanvasTeaskNew"
            @drop="drop"
            @dragover.prevent
        ></canvas>
        <canvas
            id="drawCanvasTeaskNewForDownloadImg"
            width=""
            height=""
            style="position: absolute; top: 0; left: 0; z-index: -1; visibility: hidden"
        ></canvas>
        <Modal v-model="nodeAttributePanel" width="1140">
            <p slot="header" style="">
                <Icon type="information-circled"></Icon>
                <span
                    >{{ nodeNameForPanel }}
                    <Divider type="vertical" style="margin: 0px 7px; background: #17233d" />
                    {{ processNodeTypeName }}</span
                >
            </p>
            <!-- 双击步骤弹出框 -->
            <Tabs size="small" @on-click="nodeAttrAndTaskListSwitch" v-if="nodeAttributePanel" v-model="panelName">
                <TabPane label="节点属性" name="attr" id="nodeAttributePanel">
                    <Form
                        ref="formValidate"
                        :model="formValidateNodeAttribute"
                        :rules="ruleValidateNodeAttribute"
                        :label-width="90"
                        inline
                    >
                        <FormItem label="名称" prop="name">
                            <Input
                                v-model="formValidateNodeAttribute.name"
                                placeholder="请输入中文、数字、字母、英文括号、下划线或者中划线，名称长度为1-64个字符"
                                clearable
                                :maxlength="64"
                            ></Input>
                        </FormItem>
                        <FormItem label="任务数量" prop="taskNumber">
                            <Input v-model="formValidateNodeAttribute.taskNumber" disabled></Input>
                        </FormItem>
                        <FormItem label="创建时间" prop="createTime">
                            <Input v-model="formValidateNodeAttribute.createTime" disabled></Input>
                        </FormItem>
                        <FormItem label="创建者" prop="creator">
                            <Input v-model="formValidateNodeAttribute.creator" disabled></Input>
                        </FormItem>
                        <FormItem label="开始执行方式" prop="startType">
                            <RadioGroup
                                v-model="formValidateNodeAttribute.startType"
                                @on-change="listenStartType"
                            >
                                <Radio label="true">自动执行</Radio>
                                <Radio label="false" style="margin-left: 10px">手动执行</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="开始延迟(/s)" prop="startDelay">
                            <InputNumber
                                :min="1"
                                :step="1"
                                v-model="formValidateNodeAttribute.startDelay"
                                style="width: 162px"
                                :disabled="disabledStartType"
                            ></InputNumber>
                        </FormItem>
                        <FormItem label="结束执行方式" prop="endType">
                            <RadioGroup
                                v-model="formValidateNodeAttribute.endType"
                                @on-change="listenEndType"
                            >
                                <Radio label="true">自动结束</Radio>
                                <Radio label="false">手动结束</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="结束延迟(/s)" prop="endDelay" style="margin-left: 10px">
                            <InputNumber
                                :min="1"
                                :step="1"
                                v-model="formValidateNodeAttribute.endDelay"
                                style="width: 162px"
                                :disabled="disabledEndType"
                            ></InputNumber>
                        </FormItem>
                        <FormItem label="描述" prop="desc" style="width: 46.5%">
                            <Input
                                v-model="formValidateNodeAttribute.desc"
                                type="textarea"
                                :autosize="{ minRows: 1, maxRows: 5 }"
                                placeholder="请输入描述..."
                                clearable
                                :maxlength="200"
                            ></Input>
                        </FormItem>
                        <FormItem label="节点状态" prop="nodeStatusText">
                            <Input
                                v-model="formValidateNodeAttribute.nodeStatusText"
                                disabled
                            ></Input>
                        </FormItem>
                        <FormItem label="操作" v-if="isMid">
                            <Poptip
                                :confirm="true"
                                transfer
                                title="您确定要开始执行此节点上的任务吗？"
                                placement="left"
                                @on-ok="operationNodeRunningAndStop(currentNode.id, 'run')"
                                @on-cancel="cancel"
                            >
                                <Button
                                    type="primary"
                                    :disabled="
                                        disabledOp ||
                                        formValidateNodeAttribute.nodeStatus !== 'waiting_for_start'
                                    "
                                    >开始</Button
                                >
                            </Poptip>
                            <!-- 下一步有多步,并且当前步没有结束 -->
                            <Button
                                v-if="
                                    nextLevelSteps.length > 1 &&
                                    !selectSteps.find(
                                        (step) => step.orderNo === currentNode.level + 1
                                    )
                                "
                                type="error"
                                style="margin-left: 14px"
                                :disabled="
                                    disabledOp ||
                                    formValidateNodeAttribute.nodeStatus === 'completed'
                                "
                                @click="openNextModal(currentNode.id, 'end')"
                                >结束</Button
                            >
                            <Poptip
                                v-else
                                :confirm="true"
                                transfer
                                title="您确定要结束此节点上的任务吗？"
                                placement="top"
                                @on-ok="operationNodeRunningAndStop(currentNode.id, 'end')"
                                @on-cancel="cancel"
                            >
                                <Button
                                    type="error"
                                    style="margin-left: 14px"
                                    :disabled="
                                        disabledOp ||
                                        formValidateNodeAttribute.nodeStatus === 'completed'
                                    "
                                    >结束</Button
                                >
                            </Poptip>
                            <Poptip
                                :confirm="true"
                                transfer
                                title="您确定要回滚此步骤及后继流程吗？"
                                placement="top"
                                @on-ok="operationNodeRollback(currentNode.id)"
                                @on-cancel="cancel"
                            >
                                <Button type="info" style="margin-left: 14px" :disabled="disabledOp"
                                    >回滚</Button
                                >
                            </Poptip>
                        </FormItem>
                        <FormItem label="属性">
                            <cusAttribute
                                ref="cusAttribute"
                                @func="getMsgFormSon"
                                v-bind:msgVal="propertiesData"
                            ></cusAttribute>
                        </FormItem>
                    </Form>
                </TabPane>
                <TabPane label="任务列表" :disabled="disabledTaskBol" name="task">
                    <!-- v-if="taskLoadingBol"暂时碍事 -->
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
                        <div>
                            <template v-if="isPre && !disabledAllBtn">
                                <Button
                                    type="primary"
                                    icon="md-add"
                                    class="zIndexStyleBtn"
                                    @click="moreChange"
                                    >添加任务</Button
                                >
                                <span>
                                    拷贝当前节点任务至
                                    <Select filterable
                                        v-model="copyMatchNode"
                                        filterable
                                        clearable
                                        placeholder="请选择节点"
                                        style="width: 200px"
                                    >
                                        <Option
                                            v-for="(item, index) in nodeList"
                                            :key="index"
                                            :value="item.id"
                                            >{{ item.title }}</Option
                                        >
                                    </Select>
                                    <Button
                                        type="primary"
                                        class="zIndexStyleBtn"
                                        @click="copyNodeTask"
                                        :disabled="taskData.length === 0"
                                        >拷贝</Button
                                    >
                                </span>
                            </template>
                        </div>
                        <Page
                            :total="taskTotal"
                            show-sizer
                            :current="taskCurrentPage"
                            :page-size="taskItemPage"
                            :show-total="true"
                            show-elevator
                            @on-change="switchineTaskCurrentPage"
                            @on-page-size-change="switchTaskItemPage"
                        />
                    </div>
                    <Table
                        border
                        ref="selection"
                        :columns="columnsData"
                        :data="taskData"
                        :stripe="showStripe"
                        :show-header="showHeader"
                        @on-selection-change="getSelectedTableItem"
                        draggable
                        @on-drag-drop="dragTableIndex"
                    ></Table>
                </TabPane>
                <TabPane label="演练角色管理" name="accessGroup">
                    <AccessUserToGroup
                        v-if="panelName == 'accessGroup'"
                        showType="table"
                        :type="type"
                        @setHasUser="setHasUser"
                        :disabledAllBtn="disabledAllBtn"
                        :hlConfig="hlConfig"
                        :isDistributed="isDistributed"
                        step="pre"
                    ></AccessUserToGroup>
                </TabPane>
                <TabPane label="接入机器分配" name="accessVm">
                    <AccessVmToUser
                        v-if="panelName == 'accessVm'"
                        showType="table"
                        :type="type"
                        :disabledAllBtn="disabledAllBtn"
                        :hlConfig="hlConfig"
                        :isDistributed="isDistributed"
                    ></AccessVmToUser>
                </TabPane>
            </Tabs>
            <!-- 双击步骤弹出对话框里的底部关闭和保存 -->
            <div slot="footer">
                <Button @click="nodeAttributePanel = false">关闭</Button>
                <Button
                    type="primary"
                    @click="postNodeAttribute"
                    :loading="saveNodeAttributeBtn"
                    v-show="panelName === 'attr' && drillStatus == 1"
                    :disabled="disabledAllBtn || drillStatus != 1"
                    >保存</Button
                >
            </div>
        </Modal>
        <!-- 选择下一步 -->
        <Modal
            v-model="nextModal"
            title="选择下一执行步骤"
            ok-text="确定结束"
            @on-ok="stopStep(currentNode, 'end', true)"
        >
            <RadioGroup v-model="nextStep">
                <Radio :label="node.id" v-for="node in nextLevelSteps" :key="node.id">
                    {{ node.title }}
                </Radio>
            </RadioGroup>
        </Modal>
        <Modal v-model="frameNodeModal.show" title="加入分类" ok-text="确定" @on-ok="addFrameNode">
            <!-- {{ frameNodeModal.frameId }} -->
            <RadioGroup v-model="frameNodeModal.frameId">
                <Radio :label="frame.id" v-for="frame in frameList" :key="frame.id">
                    {{ frame.name }}
                </Radio>
            </RadioGroup>
        </Modal>
        <!-- 任务列表里添加任务里的内容 -->
        <Modal
            v-model="taskTransfer"
            title="添加任务"
            ok-canel="关闭"
            ok-text="保存"
            :loading="taskTransferLoading"
            @on-cancel="cancelSelected"
            @on-ok="updateTaskNode"
            width="1100"
        >
            <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
                <Tag type="dot" color="primary">节点名：{{ nodeNameForPanel }}</Tag>
                <!-- <Button type="primary" icon="md-add" @click="openEditModal('')">创建任务</Button> -->
                <Page
                    :total="taskListTotal"
                    show-sizer
                    :current="taskListCurrentPage"
                    :page-size="taskListItemPage"
                    :show-total="true"
                    @on-change="switchineListTaskCurrentPage"
                    @on-page-size-change="switchListTaskItemPage"
                />
            </div>
            <div v-if="selectTasks.length > 0">
                已选择任务：<Tag
                    v-for="task in selectTasks"
                    :key="task.id"
                    @on-close="handleTaskClose(task.id)"
                    closable
                    >{{ task.name }}</Tag
                >
            </div>
            <Table
                ref="taskTable"
                :data="userGroupData"
                :columns="taskCol"
                @on-select-all="selectTask"
                @on-select="selectTask"
                @on-select-all-cancel="removeTask"
                @on-select-cancel="removeTask"
            >
            </Table>

            <!-- <Transfer
              :data="userGroupData"
              :target-keys="userGroupDataTargetData"
              :selected-keys="userGroupDataTargetDataSelect"
              :render-format="rednerItemUserData"
              :operations="['剔除','添加']"
              :list-style="listStyle"
              :filter-method="reachTextLabel"
              :titles="['所有任务','已选任务']"
              filterable
              @on-change="listenChangeData"></Transfer> -->
        </Modal>

<!--      todo -->
        <Modal v-model="panelScore" :title="scoreModel.title+' | 打分'" width="1100">
          <Form
              ref="formscore"
              :model="scoreModel"
              :rules="scoreRule"
              :label-width="90"
              inline
          >
            <FormItem label="分数" prop="score">
              <Input
                  v-model="scoreModel.score"
                  placeholder="请输入分数"
                  :maxlength="5"
              ></Input>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button @click="closeScore">关闭</Button>
            <!-- 演练前显示保存 -->
            <Button
                type="primary"
                :loading="lodingScorebtn"
                @click="saveScore"
            >保存</Button
            >
          </div>
          
        </Modal>
      
      
        <!-- 开始结束节点面板 -->
        <Modal v-model="nodeAttributePanelStartEnd" :title="nodeNameForPanel" width="1100">
            <Form
                ref="formValidate"
                :model="formValidateNodeAttribute"
                :rules="ruleValidateNodeAttribute"
                :label-width="90"
                inline
            >
                <FormItem label="名称" prop="name">
                    <Input
                        v-model="formValidateNodeAttribute.name"
                        placeholder="请输入中文、数字、字母、英文括号、下划线或者中划线，名称长度为1-64个字符"
                        disabled
                        :maxlength="64"
                    ></Input>
                </FormItem>
                <FormItem label="创建时间" prop="createTime">
                    <Input v-model="formValidateNodeAttribute.createTime" disabled></Input>
                </FormItem>
                <br />
                <FormItem label="开始执行方式" prop="startType">
                    <RadioGroup
                        v-model="formValidateNodeAttribute.startType"
                        @on-change="listenStartType"
                    >
                        <Radio label="true">自动执行</Radio>
                        <Radio label="false" style="margin-left: 10px">手动执行</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="开始延迟(/s)" prop="startDelay">
                    <InputNumber
                        :min="1"
                        :step="1"
                        v-model="formValidateNodeAttribute.startDelay"
                        style="width: 162px"
                        :disabled="disabledStartType"
                    ></InputNumber>
                </FormItem>
                <FormItem label="结束执行方式" prop="endType">
                    <RadioGroup
                        v-model="formValidateNodeAttribute.endType"
                        @on-change="listenEndType"
                    >
                        <Radio label="true">自动结束</Radio>
                        <Radio label="false">手动结束</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="结束延迟(/s)" prop="endDelay" style="margin-left: 10px">
                    <InputNumber
                        :min="1"
                        :step="1"
                        v-model="formValidateNodeAttribute.endDelay"
                        style="width: 162px"
                        :disabled="disabledEndType"
                    ></InputNumber>
                </FormItem>
                <FormItem label="描述" prop="desc" style="width: 48.5%">
                    <Input
                        v-model="formValidateNodeAttribute.desc"
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 5 }"
                        placeholder="请输入描述..."
                        clearable
                        :maxlength="200"
                    ></Input>
                </FormItem>
                <FormItem label="节点状态" prop="nodeStatusText">
                    <Input v-model="formValidateNodeAttribute.nodeStatusText" disabled></Input>
                </FormItem>
                <!-- 进行中显示操作 -->
                <FormItem label="操作" v-if="isMid">
                    <Poptip
                        :confirm="true"
                        title="您确定要开始执行此节点上的任务吗？"
                        placement="left"
                        @on-ok="operationNodeRunningAndStop(currentNode.id, 'run')"
                        @on-cancel="cancel"
                    >
                        <Button type="primary" :disabled="disabledOp">开始</Button>
                    </Poptip>
                    <Button
                        v-if="nextLevelSteps.length > 1"
                        type="error"
                        style="margin-left: 14px"
                        :disabled="disabledOp"
                        @click="openNextModal(currentNode.id, 'end')"
                        >结束</Button
                    >
                    <Poptip
                        v-else
                        :confirm="true"
                        transfer
                        title="您确定要结束此节点上的任务吗？"
                        placement="top"
                        @on-ok="operationNodeRunningAndStop(currentNode.id, 'end')"
                        @on-cancel="cancel"
                    >
                        <Button type="error" style="margin-left: 14px" :disabled="disabledOp"
                            >结束</Button
                        >
                    </Poptip>
                </FormItem>
                <FormItem label="属性">
                    <cusAttribute
                        ref="cusAttribute"
                        @func="getMsgFormSon"
                        v-bind:msgVal="propertiesData"
                    ></cusAttribute>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="nodeAttributePanelStartEnd = false">关闭</Button>
                <!-- 演练前显示保存 -->
                <Button
                    type="primary"
                    @click="postNodeAttribute"
                    :loading="saveNodeAttributeBtn"
                    v-show="drillStatus == 1"
                    :disabled="disabledAllBtn || drillStatus != 1"
                    >保存</Button
                >
            </div>
        </Modal>
        <!-- 场景模板 -->
        <!-- <Modal
          v-model="sceneTemplatePanel"
          title="场景模板"
          ok-text = "保存"
          width=600
          :loading=saveSceneTemplateLoading
          @on-ok="saveSceneTemplate"
          @on-cancel="cancel">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
              <FormItem label="名称" prop="name">
                  <Input v-model="formValidate.name" placeholder="请输入名称" clearable :maxlength="64"></Input>
              </FormItem>
              <FormItem label="权限" prop="visibility">
                  <RadioGroup v-model="formValidate.visibility" >
                      <Radio label="public" >公共</Radio>
                      <Radio label="share">共享</Radio>
                      <Radio label="private">私有</Radio>
                  </RadioGroup>
              </FormItem>
              <FormItem label="描述" prop="desc" style="margin-top:10px">
                  <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入描述..." clearable :aria-modal="200"></Input>
              </FormItem>
          </Form>
      </Modal> -->
        <!-- 分类 -->
        <Modal
            v-model="frameModal.show"
            :title="frameModal.title"
            ok-text="确定"
            width="600"
            :loading="frameModal.loading"
            @on-ok="confirmSave"
        >
            <Form ref="frameForm" :model="frameForm" :rules="frameFormRule" :label-width="80">
                <FormItem label="名称" prop="name">
                    <Input
                        v-model="frameForm.name"
                        placeholder="请输入名称"
                        clearable
                        :maxlength="64"
                    ></Input>
                </FormItem>
                <FormItem label="描述" prop="description" style="margin-top: 10px">
                    <Input
                        v-model="frameForm.description"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 5 }"
                        placeholder="请输入描述..."
                        clearable
                        :maxlength="200"
                    ></Input>
                </FormItem>
                <FormItem
                    label="已选步骤"
                    prop="steps"
                    style="margin-top: 10px"
                    v-show="frameForm.frameStepList.length > 0"
                >
                    <Tag
                        v-for="(node, index) in frameForm.frameStepList"
                        :key="index"
                        :closable="frameForm.frameStepList.length > 2"
                        @on-close="removeFrameNode(node, index)"
                        >{{ node.stepName }}</Tag
                    >
                </FormItem>
            </Form>
        </Modal>
        <!-- 所有任务中的任务总数 -->
        <!-- <Modal
          v-model="getAllTaskPanel"
          title="任务总数"
          width = '80%'
          >
          <Task v-if="getAllTaskPanel"></Task>
      </Modal> -->
        <Edit
            ref="editModal"
            :testId="currentSceneId"
            :projectId="currentProjectId"
            @ok="taskListNodeFalse(this.taskListCurrentPage, this.taskListItemPage)"
        ></Edit>
    </div>
</template>

<script>
import axios from '@/libs/axios1';
import $ from 'jquery';
import { debounce, throttle } from '@/libs/utils';
import { validateName } from '@/libs/reg';
import cusAttribute from './cusAttribute';
import AccessVmToUser from '@/view/drill_compete/page/accessVmToUser';
import AccessUserToGroup from '@/view/drill_compete/page/accessUserToGroup';
import Task from '@/view/drill_compete/page/yj/task';
import Edit from './task/components/task-add.vue';
import {
    saveCurSelectStep,
    querySelectSteps,
    saveProcessFrame,
    delProcessFrame,
    getProcessFrame,
    addFrameNode,
    removeFrameNode,
    saveSummarize,
    putSummarize,
    getCompeteSummarize,
} from '@/api/drill.js';
import { taskMixin } from './task/taskMixin';
export default {
    name: 'processControlNew',
    props: [],
    inject: ['detailParent'],
    components: {
        cusAttribute,
        AccessVmToUser,
        AccessUserToGroup,
        Edit,
        Task,
    },
    mixins: [taskMixin],
    data() {
        // const validateName = (rule, value, callback) => {
        //     var myReg = /[~!！@#$%^&*()/\|,<>?"'“‘();:+=\[\]{}]/;
        //     value = value.replace(/\s*/g,"");
        //     if(!value){
        //         callback("请填写名字");
        //     }else{
        //         if (myReg.test(value)) {
        //             callback("名字不能包含特殊字符");
        //         } else {
        //             callback();
        //         }
        //     }
        // };
        return {
            nextModal: false,
            nextLevelSteps: [],
            nextStep: '',
            ruleList: [''],
            copyMatchNode: '',
            nodeList: [],
            // matchProperty:"循环读取结果",
            currentNodeTaskData: [],
            allTaskData: [],
            targetTaskData: [],
            actionNodeTaskData: [],
            actionTask: false,
            actionTaskType: '',
            formValidate_data: {
                action: 'stop',
                actionTargetType: 'node',
                actionTargetId: '',
                failedAction: '',
                expression: 'or',
            },
            formValidate_conditions: [
                {
                    matchId: '',
                    matchMode: 'equal',
                    matchProperty: '',
                    matchPropertyText: '循环读取结果',
                    matchRule: '',
                    // "result": "false",
                    trigger: {},
                    ruleList: [''],
                },
            ],
            ruleValidate_data: {
                action: [{ required: true, message: '', trigger: 'blur' }],
                task: [{ required: true, message: '请选择任务', trigger: 'blur' }],
            },
            frameList: [],
            frameModal: {
                show: false,
                title: '创建分类',
                loading: true,
            },
            frameForm: {
                name: '',
                description: '',
                frameStepList: [],
            },
            frameFormRule: {
                name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
                frameStepList: [
                    {
                        required: true,
                        type: 'array',
                        min: 2,
                        message: '请至少选择两个步骤',
                        trigger: 'blur',
                    },
                ],
            },
            frameNodeModal: {
                show: false,
                frameId: '',
            },
            conditionType: 'auto',
            disabledTaskBol: true,
            topoControlStatus: 'drag',
            showStripe: true,
            showHeader: true,
            currentProjectId: '',
            editorTaskControl: '',
            currentTriigerId: '',
            config: {
                stageFrames: 500,
                eagleEyeVsibleDefault: false,
                defaultScal: 0.95,
                defaultWidth: 120,
                defaultHeight: 40,
                lnodeFontColor: '51,51,51',
                noderotateValue: 0.5,
                nodeScale: 0.2,
                nodeAlpha: 1,
                nodeStrokeColor: '200,200,200', // 灰粉色
                nodeFillColor: '255,255,255',
                nodeShadow: false,
                nodeShadowColor: 'rgba(255,255,255,1)',
                nodeFont: '14px/30px Consolas', //字体尺寸大小
                nodeFontText: '22px/30px ', //字体
                nodeFontColor: '0,0,0', //步骤名字的字体颜色---黑色
                nodeBorderRadius: 5,
                nodeShadowOffsetX: 3,
                nodeShadowOffsetY: 6,
                lineWidth: 0.5,
                lineDecriptionWidth: 20,
                lineAlpha: 1,
                lineStrokeColor: '0,0,0',
                lineFontColor: '0,0,0',
                lineShadow: false,
                lineShadowColor: 'rgba(255,255,255,1)',
                lineFontText: '22px/30px Consolas',
                offsetGap: 40,
                arrowsRadius: 0,
                direction: 'horizontal',
                LineJoin: 'lineJoin',
                dashedPattern: 5,
                containerAlpha: 1,
                containerFillColor: '221,235,249', //淡淡淡的蓝白色
                containerStrokeColor: '255,255,255', //白色
                containerFontColor: '0,0,0',
                containerFont: '18px/30px ',
                containerBorderRadius: 5,
                containerShadowOffsetX: 3,
                containerShadowOffsetY: 6,
                containerBorderRadius: 5,
                containerShadowOffsetX: 3,
                containerShadowOffsetY: 6,
                Textalpha: 1,
                TextfillColor: '233,223,152', //淡黄色
                Textshadow: false,
                TextshadowColor: '0,0,107',
                Textfont: '22px/30px Consolas',
                TextfontColor: '0,0,0',
                TextborderRadius: 15,
                TextShadowOffsetX: 3,
                TextShadowOffsetY: 6,
                TextX: 60,
                TextY: 10,
            },
            timeId: null,
            layout: {},
            stage: null,
            scene: null,
            nodemap:{},
            editorTaskControl: '',
            //拓扑层次导航
            selectLevel: '',
            //是否显示参考线
            showRuleLine: true,
            //标尺线数组
            ruleLines: [],
            //移动设备过程中用到的参数
            mouse_number: 0, //通过计数器进行限制
            groupcount: [], //移动线条
            //记录坐标用
            this_x: 0,
            this_y: 0,
            child_x: [],
            child_y: [],
            //用于判断是否是一直连线状态
            oLIneBol: false,
            //用于判断子网和网络是展开状态还是关闭状态
            networkBol: true,
            subnetBol: true,
            //用于记录是否显示报警
            alarmtBol: true,
            clearClickTimer: null,
            currentNode: null,
            //实验流程控制
            childrenNode: $('#childrenNode'),
            linePanel: $('#linePanel'),
            pauseResverPanel: $('#pauseResverPanel'),
            stopPanel: $('#stopPanel'),
            containerMangeMenu: $('#containerMangeMenu'),
            nodeJSONstring: '',
            modeIdIndex: 0,
            lineType: 'drag', //line
            //存放节点id
            startNodeLine: null,
            endNodeLine: null,
            //存放节点
            beginNode: null,
            endNode: null,
            tempNodeA: null,
            tempNodeZ: null,
            link: null,
            beginNode: null,
            nodeAttributePanel: false,
            nodeNameForPanel: '',
            split2: 0.5,
            formValidateNodeAttribute: {
                name: '',
                taskNumber: '',
                createTime: '',
                creator: '',
                startType: 'true',
                endType: 'true',
                endDelay: 0,
                startDelay: 0,
                nodeStatus: '',
                desc: '',
                preCondition: 'any',
                accessGroupId: '',
            },
            ruleValidateNodeAttribute: {
                name: [
                    { required: true, message: '请输入节点名称', trigger: 'blur' },
                    { validator: validateName, trigger: 'change, blur' },
                ],
            },
            accessUserGroupList: [],
            disabledStartType: false,
            disabledEndType: false,
            saveNodeAttributeBtn: false,
          
          
          
            // 修改分数的数据
            step2Scoreid:{},// map 的key为stepid ,值为分数scoreid
            panelScore:false, // 分数面板
            scoreModel:{},// 修改分数的 form数据
            scoreRule: {
              score: [
                { required: true, message: '请输入分数', trigger: 'blur' },
                { validator: this.validateScore, trigger: 'change, blur' },
              ]
            },//分数校验
            lodingScorebtn:false,
          

            taskTotal: 0,
            taskCurrentPage: 1,
            taskItemPage: 10,
            taskListTotal: 0,
            taskListCurrentPage: 1,
            taskListItemPage: 10,
            taskCol: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                {
                    title: '名称',
                    key: 'name',
                    minWidth: 80,
                    align: 'center',
                    sortable: true,
                },
                {
                    title: '任务类型',
                    key: 'taskType',
                    minWidth: 120,
                    align: 'center',
                    render: (h, { row: { taskType } }) => {
                        return h('Tag', {}, this.filterTaskType(taskType));
                    },
                },
                {
                    title: '状态',
                    key: 'status',
                    minWidth: 80,
                    align: 'center',
                    render: (h, params) => {
                        return this.renderTaskStatus(h, params.row.status);
                    },
                },
            ],
            columnsData: [
                // {
                //     type:'selection',
                //     width:60,
                //     align:'center'
                // },
                {
                    title: '步骤',
                    width: 80,
                    key: 'step',
                    align: 'center',
                    // sortable: true,
                    render: (h, params) => {
                        return h('div', {}, params.row._index + 1);
                    },
                },
                {
                    title: '名称',
                    key: 'name',
                    minWidth: 80,
                    align: 'center',
                    // sortable: true,
                    tooltip: true,
                },
                {
                    title: '人员',
                    key: 'taskUserList',
                    minWidth: 80,
                    align: 'center',
                    tooltip: true,
                    render: (h, params) => {
                        return h(
                            'span',
                            params.row.taskUserList
                                ? params.row.taskUserList.map((user) => user.userName).join('，')
                                : '无'
                        );
                    },
                },
                {
                    title: '任务类型',
                    key: 'taskType',
                    minWidth: 120,
                    align: 'center',
                    render: (h, { row: { taskType } }) => {
                        return h('Tag', {}, this.filterTaskType(taskType));
                    },
                },
                {
                    title: '配置',
                    key: 'configName',
                    width: 150,
                    align: 'center',
                    render: (h, { row: { configName } }) => {
                        return h('span', configName || '无');
                    },
                },
                {
                    title: '创建时间',
                    key: 'created',
                    width: 150,
                    align: 'center',
                    sortable: true,
                },
                {
                    title: '状态',
                    key: 'status',
                    minWidth: 80,
                    align: 'center',
                    render: (h, params) => {
                        return this.renderTaskStatus(h, params.row.status);
                    },
                },
                {
                    title: '详情',
                    key: '',
                    align: 'center',
                    minWidth: 100,
                    render: (h, params) => {
                        let statics = params.row.overview;
                        let statusGroup = [];
                        if (JSON.stringify(statics) != '{}') {
                            for (let i in statics) {
                                let text = '';
                                switch (i) {
                                    case 'running':
                                        text = '运行中';
                                        break;
                                    case 'error':
                                        text = '失败';
                                        break;
                                    case 'failed':
                                        text = '失败';
                                        break;
                                    case 'completed':
                                        text = '完成';
                                        break;
                                    case 'initialized':
                                        text = '初始化';
                                        break;
                                    case 'starting':
                                        text = '启动中';
                                        break;
                                    case 'closing':
                                        text = '关闭中';
                                        break;
                                    default:
                                        text = i;
                                        break;
                                }
                                statusGroup.push(h('p', {}, text + ':' + statics[i]));
                            }
                        }
                        // console.log(statusGroup)
                        return h('div', {}, statusGroup);
                    },
                },
                {
                    title: '操作',
                    key: '',
                    align: 'center',
                    width: 150,
                    render: (h, params) => {
                        let _this = this;
                        params = params.row;
                        let statusVm = params.status;
                        let status = params.status;
                        let operationGroup = [];
                        let operationOption = [];
                        // if(statusVm=="error"||statusVm=="initialized"||statusVm=="completed"||statusVm=="paused"||statusVm=="suspend"||statusVm=="initialized"){
                        //     statusVm = "开始"
                        // }else if(statusVm=="running"){
                        //     statusVm = "停止"
                        // }else{
                        //     statusVm = "进行中"
                        // }
                        switch (statusVm) {
                            case 'initialized':
                            case 'error':
                            case 'failed':
                            case 'completed':
                                statusVm = '开始';
                                break;
                            case 'running':
                            case 'starting':
                            case 'closing':
                            case 'stop_error':
                                statusVm = '停止';
                                break;
                            default:
                                break;
                        }
                        if (this.isPre) {
                            //赛前
                            operationGroup.push('上移', '上移', '下移', '删除任务', '移除');
                        }
                        // "查看详情",
                        operationOption = operationGroup.map((item, index) => {
                            if (index == 0) {
                                // console.log('---')
                                return h(
                                    'Option',
                                    {
                                        props: { value: 0, label: 0 },
                                        class: ['falseValue' + params.id],
                                        style: { display: 'none' },
                                    },
                                    ''
                                );
                            } else {
                                return h('Option', { props: { value: item } }, item);
                            }
                        });
                        console.log();

                        return h(
                            'div',
                            {
                                class: ['opertionVm'],
                            },
                            [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            disabled: this.disabledOp || status === 'completed', //赛中才允许操作
                                        },
                                        on: {
                                            click(event) {
                                                // console.log(event)
                                                let active = null;
                                                if (event.srcElement.innerText == '开始') {
                                                    active = 'start';
                                                } else if (event.srcElement.innerText == '停止') {
                                                    active = 'stop';
                                                } else {
                                                    active = '';
                                                }
                                                _this.$Modal.confirm({
                                                    title:
                                                        '你确定要' +
                                                        event.srcElement.innerText +
                                                        '此任务吗',
                                                    okText: '确定',
                                                    // loading:true,
                                                    // buttonLoading:true,
                                                    onOk: () => {
                                                        _this.startAndStopTheTesk(
                                                            active,
                                                            params.id
                                                        );
                                                    },
                                                    render: (h) => {
                                                        return h('div', {}, '');
                                                    },
                                                });
                                            },
                                        },
                                        style: {
                                            borderRadius:
                                                this.drillStatus === 1 && this.currentIndex === 0
                                                    ? '4px 0px 0px 4px'
                                                    : '4px',
                                        },
                                    },
                                    statusVm
                                ),
                                h(
                                    'Select',
                                    {
                                        props: {
                                            placeholder: '',
                                            value: 0,
                                            transfer: true,
                                            disabled: this.disabledAllBtn,
                                            // 'v-model':,
                                        },
                                        style: {
                                            width: '20px',
                                            display:
                                                this.drillStatus === 1 ? 'inline-block' : 'none',
                                        },
                                        class: ['ssssssssss'],
                                        on: {
                                            'on-change': (value) => {
                                                // console.log(value);
                                                if (value != 0) {
                                                    if (value == '上移') {
                                                        _this.removeTaskStep(params.id, 'up');
                                                    } else if (value == '下移') {
                                                        _this.removeTaskStep(params.id, 'down');
                                                    } else if (value == '删除任务') {
                                                        _this.$Modal.confirm({
                                                            title: '删除任务',
                                                            content: '您确定要删除这个任务吗？',
                                                            onOk: () => {
                                                                _this.deleteTask(params.id);
                                                            },
                                                            onCancel: () => {},
                                                        });
                                                    } else if (value == '修改任务') {
                                                        if (params.taskType == 'qga_execute_cmd') {
                                                            _this.$refs.cmd.updateTask(params.id);
                                                        } else if (params.taskType == 'qga_write') {
                                                            _this.$refs.write.updateTask(params.id);
                                                        } else if (
                                                            params.taskType == 'qga_loop_read'
                                                        ) {
                                                            _this.$refs.loopRead.updateTask(
                                                                params.id
                                                            );
                                                        } else if (params.taskType == 'qga_read') {
                                                            _this.$refs.onceReadFile.updateTask(
                                                                params.id
                                                            );
                                                        } else if (
                                                            params.taskType == 'mirror_flow'
                                                        ) {
                                                            _this.$refs.mirror.updateTask(
                                                                params.id
                                                            );
                                                        } else if (params.taskType == 'tunnel') {
                                                            _this.$refs.protocol.updateTask(
                                                                params.id
                                                            );
                                                        } else if (
                                                            params.taskType == 'vm_metadata'
                                                        ) {
                                                            _this.$refs.metadata.updateTask(
                                                                params.id
                                                            );
                                                        } else if (
                                                            params.taskType == 'loop_capture'
                                                        ) {
                                                            _this.$refs.outband.updateTask(
                                                                params.id
                                                            );
                                                        } else if (
                                                            params.taskType == 'once_capture'
                                                        ) {
                                                            _this.$refs.oncecapture.updateTask(
                                                                params.id
                                                            );
                                                        }
                                                    } else if (value == '查看详情') {
                                                        // console.log(params.taskType)
                                                        let taskType = params.taskType;
                                                        let taskId = params.id;
                                                        if (taskType == 'access') {
                                                            if (
                                                                !_this.componentsObj.loadingUserBtn
                                                            ) {
                                                                _this.componentsObj.loadingUserBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.user.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.user.taskDeail(taskId);
                                                            }
                                                        } else if (taskType == 'vm_metadata') {
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingMetadataBtn
                                                            ) {
                                                                _this.componentsObj.loadingMetadataBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.metadata.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.metadata.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'qga_write') {
                                                            if (
                                                                !_this.componentsObj.loadingWriteBtn
                                                            ) {
                                                                _this.componentsObj.loadingWriteBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.writeBtn.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.writeBtn.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'qga_execute_cmd') {
                                                            if (
                                                                !_this.componentsObj.loadingVmcmdBtn
                                                            ) {
                                                                _this.componentsObj.loadingVmcmdBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.vmcmd.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.vmcmd.taskDeail(taskId);
                                                            }
                                                        } else if (taskType == 'once_server_flag') {
                                                            // _this.$refs.flagVmOnce.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingFlagVmOnceBtn
                                                            ) {
                                                                _this.componentsObj.loadingFlagVmOnceBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.flagVmOnce.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.flagVmOnce.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (
                                                            taskType == 'once_configure_flag'
                                                        ) {
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingFlagOutBtn
                                                            ) {
                                                                _this.componentsObj.loadingFlagOutBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.flagOut.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.flagOut.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'stop_task') {
                                                            // _this.$refs.stopTask.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingStopTaskBtn
                                                            ) {
                                                                _this.componentsObj.loadingStopTaskBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.stopTask.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.stopTask.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'once_submit_flag') {
                                                            // _this.$refs.flagComOnce.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingFlagComOnceBtn
                                                            ) {
                                                                _this.componentsObj.loadingFlagComOnceBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.flagComOnce.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.flagComOnce.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'once_report') {
                                                            // _this.$refs.reportComOnce.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingReportComOnceBtn
                                                            ) {
                                                                _this.componentsObj.loadingReportComOnceBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.reportComOnce.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.reportComOnce.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'customize') {
                                                            // _this.$refs.custom.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingCustomBtn
                                                            ) {
                                                                _this.componentsObj.loadingCustomBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.custom.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.custom.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'train') {
                                                            if (
                                                                !_this.componentsObj.loadingTrainBtn
                                                            ) {
                                                                _this.componentsObj.loadingTrainBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.train.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.train.taskDeail(taskId);
                                                            }
                                                        } else if (taskType == 'qga_read') {
                                                            // _this.$refs.onceReadFile.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingOnceReadFileBtn
                                                            ) {
                                                                _this.componentsObj.loadingOnceReadFileBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.onceReadFile.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.onceReadFile.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'once_capture') {
                                                            // _this.$refs.oncecapture.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingOncecaptureBtn
                                                            ) {
                                                                _this.componentsObj.loadingOncecaptureBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.oncecapture.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.oncecapture.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'mirror_flow') {
                                                            // _this.$refs.flowImage.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingFlowImageBtn
                                                            ) {
                                                                _this.componentsObj.loadingFlowImageBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.flowImage.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.flowImage.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'tunnel') {
                                                            // _this.$refs.protocol.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingProtocolBtn
                                                            ) {
                                                                _this.componentsObj.loadingProtocolBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.protocol.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.protocol.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'qga_loop_read') {
                                                            // _this.$refs.loopRead.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingLoopReadBtn
                                                            ) {
                                                                _this.componentsObj.loadingLoopReadBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.loopRead.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.loopRead.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (
                                                            taskType == 'loop_configure_flag'
                                                        ) {
                                                            // _this.$refs.flagOutLoop.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingFlagOutLoopBtn
                                                            ) {
                                                                _this.componentsObj.loadingFlagOutLoopBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.flagOutLoop.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.flagOutLoop.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'loop_capture') {
                                                            // _this.$refs.outband.taskDeail(taskId)
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingOutbandBtn
                                                            ) {
                                                                _this.componentsObj.loadingOutbandBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.outband.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.outband.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'checker') {
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingCheckerBtn
                                                            ) {
                                                                _this.componentsObj.loadingCheckerBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.checker.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.checker.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'loop_submit_flag') {
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingFlagComLoopBtn
                                                            ) {
                                                                _this.componentsObj.loadingFlagComLoopBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.flagComLoop.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.flagComLoop.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        } else if (taskType == 'loop_report') {
                                                            if (
                                                                !_this.componentsObj
                                                                    .loadingReportComLoopBtn
                                                            ) {
                                                                _this.componentsObj.loadingReportComLoopBtn = true;
                                                                setTimeout(() => {
                                                                    _this.$refs.reportComLoop.taskDeail(
                                                                        taskId
                                                                    );
                                                                }, 300);
                                                            } else {
                                                                _this.$refs.reportComLoop.taskDeail(
                                                                    taskId
                                                                );
                                                            }
                                                        }
                                                    } else if (value == '移除') {
                                                        _this.updateRemoveTaskFormNode(params.id);
                                                    }
                                                }
                                                $('.falseValue' + params.id).click();
                                                $('.opertionVm .ivu-select-placeholder').text('');
                                            },
                                        },
                                    },
                                    operationOption
                                ),
                            ]
                        );
                    },
                },
            ],
            taskData: [],
            panelName: 'attr',
            savePanel: true,
            objectData: {
                projectId: '',
                nodeId: '',
                getNodeTaskList: '',
            },
            selectedData: [],
            installNodeGroup: [],
            runningNodeGroup: [],
            complatedNodeGroup: [],
            pausedNodeGroup: [],
            waitingGroup: [],
            waitingForStart: [],
            waitingForStop: [],
            timerGroup: [],
            taskTransfer: false,
            taskTransferLoading: true,
            listStyle: {
                width: '490px',
                height: '400px',
            },
            userGroupData: [], //总数据
            userGroupDataTargetData: [], //已选用户--右侧框中的数据,
            userGroupDataTargetDataSelect: [], // 左边框里 已勾选未添加到右边的
            currentSceneId: '',
            taskLoadingBol: false,

            //保存场景模板
            sceneTemplatePanel: false,
            saveSceneTemplateLoading: true,
            formValidate: {
                name: '',
                configer: '',
                selectedVmData: [],
                desc: '',
                vmName: '',
                vmIP: '',
                visibility: 'share',
            },
            ruleValidate: {
                name: [{ required: true, message: '', trigger: 'blur', validator: validateName }],
                visibility: [{ required: true, message: '', trigger: 'blur' }],
                configer: [{ required: true, message: '请选择配置', trigger: 'change' }],
                selectedVmData: [{ required: true, message: '请选择虚拟机' }],
            },
            propertiesData: [],
            processClearSetinterval: null,
            componentsObj: {
                loadingWriteBtn: false,
                loadingVmcmdBtn: false,
                loadingFlowImageBtn: false,
                loadingMetadataBtn: false,
                loadingOncecaptureBtn: false,
                loadingOnceReadFileBtn: false,
                loadingOutbandBtn: false,
                loadingProtocolBtn: false,
                loadingLoopReadBtn: false,
                loadingCheckerBtn: false,
                loadingCustomBtn: false,
                loadingTrainBtn: false,
                loadingFlagComLoopBtn: false,
                loadingFlagComOnceBtn: false,
                loadingFlagOutBtn: false,
                loadingFlagOutLoopBtn: false,
                loadingFlagVmBtn: false,
                loadingFlagVmOnceBtn: false,
                loadingReportComLoopBtn: false,
                loadingReportComOnceBtn: false,
                loadingStopTaskBtn: false,
                loadingUserBtn: false,
            },
            reportBtnBol: false, //试验报告控制开关
            nodeLocationGroup: [], //存储位置
            nodeLocationIdGroup: [],
            nodeAttributePanelStartEnd: false,
            processNodeTypeName: '',
            taskUserIviewPanel: '', //人员视图切换
            taskUserGroup: [],
            exmentUserPanel: false, //实验人员
            processNodeTask: [
                {
                    title: '名称',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '任务ID',
                    key: 'id',
                    align: 'center',
                },
                {
                    title: '任务类型',
                    key: 'taskType',
                    align: 'center',
                    render: (h, { row: { taskType } }) => {
                        return h('Tag', {}, this.filterTaskType(taskType));
                    },
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    render: (h, params) => {
                        return this.renderTaskStatus(h, params.row.status);
                    },
                },

                {
                    title: '所属节点',
                    key: 'belongNode',
                    align: 'center',
                },
                {
                    title: '任务详情',
                    key: '',
                    align: 'center',
                    render: (h, params) => {
                        return h(
                            'Button',
                            {
                                props: {
                                    type: 'dot',
                                    color: 'primary',
                                },
                            },
                            '查看'
                        );
                    },
                },
            ],
            processNodeTaskData: [],
            currentUserName: '',
            taskStatusBol: true,
            getAllTaskPanel: false,
            taskDeailColumns: [
                {
                    type: 'index',
                    width: 60,
                    align: 'center',
                },
                {
                    title: '名称',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '任务类型',
                    key: 'taskType',
                    align: 'center',
                    render: (h, { row: { taskType } }) => {
                        return h(
                            'Tag',
                            {
                                props: {
                                    size: 'small',
                                },
                            },
                            this.filterTaskType(taskType)
                        );
                    },
                },
                // {
                //     title:'任务种类',
                //     key:'',
                //     align:'center',
                //     render:(h,params)=>{
                //         let _text = null;
                //         if(params.row.taskMode=="normal"){
                //             _text = "流程任务"
                //         }else if(params.row.taskMode=="temp"){
                //             _text = "实时任务"
                //         }else{
                //             _text = "预设临机任务"
                //         }
                //         return h('div',{},_text)
                //     }
                // },
                {
                    title: '节点名称',
                    key: 'nodeName',
                    align: 'center',
                },
                {
                    title: '创建者',
                    key: 'creatorName',
                    align: 'center',
                },
                {
                    title: '时间',
                    key: 'created',
                    align: 'center',
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    render: (h, params) => {
                        return this.renderTaskStatus(h, params.row.status);
                    },
                },
                {
                    title: '操作',
                    key: '',
                    align: 'center',
                    render: (h, params) => {
                        let _this = this;
                        return h(
                            'Button',
                            {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                style: {
                                    margin: '5px',
                                },
                                on: {
                                    click: () => {
                                        _this.reachTaskDeatil(params.row.taskType, params.row.id);
                                    },
                                },
                            },
                            '查看详情'
                        ); //所有任务里的查看详情
                    },
                },
            ],
            taskDeailData: [],
            allTaskCurrentIndex: 1,
            allTaskCurrentSize: 10,
            allTaskTotal: 0,
            taskStatusPanelCurrent: '',
            taskTypePanelCurrent: '',
            taskNodePanelCurrent: '',
            taskModalPanelCurrent: '',
            taskNameReach: '',
            setTimeoutReach: null,
            judgePanelType: true, //判断保存还是修改
            currentPanelNodeData: [],
            currentPanelLinkData: [],
            currentNodeStepData: [],
            conditionIndex: -1,
            statusObj: {
                initialized: {
                    label: '初始化',
                    value: 'initialized',
                    color: 'default',
                },
                running: {
                    label: '运行中',
                    value: 'running',
                    color: 'success',
                },
                failed: {
                    label: '已失败',
                    value: 'failed',
                    color: 'error',
                },
                completed: {
                    label: '已完成',
                    value: 'completed',
                    color: 'primary',
                },
                waiting_for_start: {
                    label: '等待启动',
                    value: 'waiting_for_start',
                    color: 'green',
                },
                waiting_for_stop: {
                    label: '等待结束',
                    value: 'waiting_for_stop',
                    color: 'green',
                },
                starting: {
                    label: '启动中',
                    value: 'starting',
                    color: 'success',
                },
                closing: {
                    label: '关闭中',
                    value: 'closing',
                    color: 'success',
                },
                error: {
                    label: '失败',
                    value: 'failed',
                    color: 'error',
                },
            },
            selectTasks: [],
            nodeDefaultAttr: {
                notice: {
                    txt: '发送公告',
                    key: 'notice',
                    value: 1,
                    type: 'default',
                    checked: false,
                },
                record: {
                    txt: '演练记录',
                    key: 'record',
                    value: 1,
                    type: 'default',
                    checked: false,
                },
                report: {
                    txt: '演练报告',
                    key: 'report',
                    value: 1,
                    type: 'default',
                    checked: false,
                },
                // judgment:{
                //     txt:'研判',
                //     key:'judgment',
                //     value:1,
                //     type:'default',
                //     checked:false
                // },
                // rollback:{
                //     txt:'回滚',
                //     key:'rollback',
                //     value:1,
                //     type:'default',
                //     checked:false
                // },
                attachment: {
                    txt: '附件',
                    key: 'attachment',
                    value: 1,
                    type: 'default',
                    checked: true,
                },
            },
            selectSteps: [],
            allContainerNode: [],
            selectedNodes: [],
        };
    },
    computed: {
        disabledAllBtn() {
            return this.detailParent.disabledAllBtn();
        },
        hlConfig() {
            return this.detailParent.hlConfig;
        },
        isDistributed() {
            return this.detailParent.isDistributed;
        },
        type() {
            return this.detailParent.drillDetail.type;
        },
        notOwn() {
            return this.detailParent.notOwn; //是不是自己的
        },
        drillStatus() {
            return this.detailParent.drillStatus; //演练状态
        },
        currentIndex() {
            return this.detailParent.currentIndex; //第几步
        },
        isPre() {
            return this.currentIndex === 0 && this.drillStatus == 1;
        },
        isMid() {
            return this.currentIndex === 1 && this.drillStatus == 2;
        },
        disabledOp() {
            //禁止操作
            return !this.isMid || this.disabledAllBtn;
        },
    },
    watch: {
        drillStatus(val) {
            val === 1 && this.querySelectSteps() && this.dataQueryInProgress();
        },
    },
    created() {
        this.currentProjectId = this.$route.query.prjid;
        this.currentSceneId = this.$route.query.id;
        this.objectData.projectId = this.currentProjectId;
        this.objectData.getNodeTaskList = this.getNodeTaskList;
        this.getCompeteSummarizeScore() // 获取步骤的分数
        this.loadProcessData(); //画图的函数
        this.querySelectSteps(); //获取保存的多层级步骤
        window.addEventListener('resize', (e) => {
            this.debounceResize();
        });
       
    },
    beforeDestroy() {
        clearTimeout(this.processClearSetinterval);
    },
    methods: {
        debounceResize: debounce(function () {
            if (this.stage) {
                let width = $('#contextBodyTaskPcNew').width();
                let height = $('#contextBodyTaskPcNew').height();
                this.stage.canvas.width = width;
                this.stage.canvas.height = height;
                this.staged.canvas.width = width;
                this.staged.canvas.height = height;
                this.scened.centerAndZoom();
            }
        }, 1000),
        openEditModal(data) {
            this.$refs['editModal'].showModal(data);
        },
        setHasUser(val) {
            this.detailParent.setHasUser(val);
        },
        // 选中
        selectTask(selection, row) {
            if (!row) {
                //全选
                selection.forEach((task) => {
                    let selTaskIds = this.selectTasks.map((task) => task.id);
                    if (!selTaskIds.includes(task.id)) {
                        let index = this.userGroupData.findIndex((item) => item.id == task.id);
                        if (index != -1) {
                            this.userGroupData[index]._checked = true;
                        }
                        this.selectTasks.push(task);
                    }
                });
            } else {
                let index = this.userGroupData.findIndex((item) => item.id == row.id);
                if (index != -1) {
                    this.userGroupData[index]._checked = true;
                }
                this.selectTasks.push(row);
            }
        },
        // 取消选中
        removeTask(selection, row) {
            if (!row) {
                //全选
                this.userGroupData.forEach((task) => {
                    task._checked = false;
                    this.delSelTask(task.id);
                });
            } else {
                let listExper = this.userGroupData.filter((item) => item.id == row.id);
                if (listExper.length > 0) {
                    listExper[0]._checked = false;
                }
                this.delSelTask(row.id);
            }
        },
        //close
        handleTaskClose(id) {
            let index = this.userGroupData.findIndex((item) => item.id == id);
            if (index != -1) {
                this.$refs.taskTable.toggleSelect(index);
            } else {
                this.delSelTask(id);
            }
        },
        delSelTask(id) {
            let delTaskIndex = this.selectTasks.findIndex((items) => items.id === id);
            if (delTaskIndex >= 0) {
                this.selectTasks.splice(delTaskIndex, 1);
            }
        },
        // 拖拽
        dragend(event) {
            event.dataTransfer.clearData();
        },
        // 单次型任务
        dragTaskTypeConfigSingle(a, b, c) {
            event.dataTransfer.setData('dataType', 'configSing' + '-' + c);
        },
        // 持续型任务
        dragTaskTypeDataPers(a, b, c) {
            event.dataTransfer.setData('dataType', 'dataPers' + '-' + c);
        },
        getNodeList(id) {
            let _this = this;
            axios({
                url: '/process/nodes?testId=' + _this.currentSceneId,
            }).then((res) => {
                if (res.code == 1) {
                    if (res.data && res.data.length > 0) {
                        _this.nodeList = [];
                        for (let item of res.data) {
                            if (
                                item.id != id &&
                                item.nodeType != 'stop' &&
                                item.nodeType != 'start'
                            ) {
                                _this.nodeList.push(item);
                            }
                        }
                    }
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        copyNodeTask() {
            if (this.copyMatchNode) {
                axios({
                    url:
                        '/process/nodes/copy/tasks/' +
                        this.currentNode.id +
                        '/' +
                        this.copyMatchNode,
                    method: 'POST',
                }).then((res) => {
                    // console.log(res,'resp')
                    if (res.code == 1) {
                        this.$Message.success('拷贝成功');
                    } else {
                        this.$Message.error(res.message);
                    }
                });
            } else {
                this.$Message.error('请选择节点');
            }
        },
        getAllTaskData() {
            axios({
                url: 'process/tasks?&testId=' + this.currentSceneId + '&pageIndex=1&pageSize=1000',
            }).then((response) => {
                if (response.code == 1) {
                    this.allTaskData = response.data.items;
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        // 点击查看详情调用的函数
        reachTaskDeatil(taskType, taskId) {
            let _this = this;
            // console.log(taskType)
            if (taskType == 'access') {
                if (!_this.componentsObj.loadingUserBtn) {
                    _this.componentsObj.loadingUserBtn = true;

                    setTimeout(() => {
                        _this.$refs.user.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.user.taskDeail(taskId);
                }
            } else if (taskType == 'vm_metadata') {
                if (!_this.componentsObj.loadingMetadataBtn) {
                    _this.componentsObj.loadingMetadataBtn = true;
                    setTimeout(() => {
                        _this.$refs.metadata.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.metadata.taskDeail(taskId);
                }
            } else if (taskType == 'qga_write') {
                if (!_this.componentsObj.loadingWriteBtn) {
                    _this.componentsObj.loadingWriteBtn = true;
                    setTimeout(() => {
                        // console.log(_this.$refs.writeBtn,'000011')
                        _this.$refs.writeBtn.taskDeail(taskId);
                    }, 300);
                } else {
                    // console.log(_this.$refs.writeBtn,'0000')
                    _this.$refs.writeBtn.taskDeail(taskId);
                }
            } else if (taskType == 'qga_execute_cmd') {
                if (!_this.componentsObj.loadingVmcmdBtn) {
                    _this.componentsObj.loadingVmcmdBtn = true;
                    setTimeout(() => {
                        _this.$refs.vmcmd.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.vmcmd.taskDeail(taskId);
                }
            } else if (taskType == 'once_server_flag') {
                // _this.$refs.flagVmOnce.taskDeail(taskId)
                if (!_this.componentsObj.loadingFlagVmOnceBtn) {
                    _this.componentsObj.loadingFlagVmOnceBtn = true;
                    setTimeout(() => {
                        _this.$refs.flagVmOnce.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.flagVmOnce.taskDeail(taskId);
                }
            } else if (taskType == 'once_configure_flag') {
                if (!_this.componentsObj.loadingFlagOutBtn) {
                    _this.componentsObj.loadingFlagOutBtn = true;
                    setTimeout(() => {
                        _this.$refs.flagOut.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.flagOut.taskDeail(taskId);
                }
            } else if (taskType == 'stop_task') {
                // _this.$refs.stopTask.taskDeail(taskId)
                if (!_this.componentsObj.loadingStopTaskBtn) {
                    _this.componentsObj.loadingStopTaskBtn = true;
                    setTimeout(() => {
                        _this.$refs.stopTask.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.stopTask.taskDeail(taskId);
                }
            } else if (taskType == 'once_submit_flag') {
                // _this.$refs.flagComOnce.taskDeail(taskId)
                if (!_this.componentsObj.loadingFlagComOnceBtn) {
                    _this.componentsObj.loadingFlagComOnceBtn = true;
                    setTimeout(() => {
                        _this.$refs.flagComOnce.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.flagComOnce.taskDeail(taskId);
                }
            } else if (taskType == 'once_report') {
                // _this.$refs.reportComOnce.taskDeail(taskId)
                if (!_this.componentsObj.loadingReportComOnceBtn) {
                    _this.componentsObj.loadingReportComOnceBtn = true;
                    setTimeout(() => {
                        _this.$refs.reportComOnce.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.reportComOnce.taskDeail(taskId);
                }
            } else if (taskType == 'customize') {
                // _this.$refs.custom.taskDeail(taskId)
                if (!_this.componentsObj.loadingCustomBtn) {
                    _this.componentsObj.loadingCustomBtn = true;
                    setTimeout(() => {
                        _this.$refs.custom.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.custom.taskDeail(taskId);
                }
            } else if (taskType == 'train') {
                if (!_this.componentsObj.loadingTrainBtn) {
                    _this.componentsObj.loadingTrainBtn = true;
                    setTimeout(() => {
                        _this.$refs.train.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.train.taskDeail(taskId);
                }
            } else if (taskType == 'qga_read') {
                // _this.$refs.onceReadFile.taskDeail(taskId)
                if (!_this.componentsObj.loadingOnceReadFileBtn) {
                    _this.componentsObj.loadingOnceReadFileBtn = true;
                    setTimeout(() => {
                        _this.$refs.onceReadFile.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.onceReadFile.taskDeail(taskId);
                }
            } else if (taskType == 'once_capture') {
                // _this.$refs.oncecapture.taskDeail(taskId)
                if (!_this.componentsObj.loadingOncecaptureBtn) {
                    _this.componentsObj.loadingOncecaptureBtn = true;
                    setTimeout(() => {
                        _this.$refs.oncecapture.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.oncecapture.taskDeail(taskId);
                }
            } else if (taskType == 'mirror_flow') {
                // _this.$refs.flowImage.taskDeail(taskId)
                if (!_this.componentsObj.loadingFlowImageBtn) {
                    _this.componentsObj.loadingFlowImageBtn = true;
                    setTimeout(() => {
                        // console.log('魔镜', _this.$refs.flowImage)
                        _this.$refs.flowImage.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.flowImage.taskDeail(taskId);
                }
            } else if (taskType == 'tunnel') {
                // _this.$refs.protocol.taskDeail(taskId)
                if (!_this.componentsObj.loadingProtocolBtn) {
                    _this.componentsObj.loadingProtocolBtn = true;
                    setTimeout(() => {
                        _this.$refs.protocol.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.protocol.taskDeail(taskId);
                }
            } else if (taskType == 'qga_loop_read') {
                // _this.$refs.loopRead.taskDeail(taskId)
                if (!_this.componentsObj.loadingLoopReadBtn) {
                    _this.componentsObj.loadingLoopReadBtn = true;
                    setTimeout(() => {
                        _this.$refs.loopRead.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.loopRead.taskDeail(taskId);
                }
            } else if (taskType == 'loop_configure_flag') {
                // _this.$refs.flagOutLoop.taskDeail(taskId)
                if (!_this.componentsObj.loadingFlagOutLoopBtn) {
                    _this.componentsObj.loadingFlagOutLoopBtn = true;
                    setTimeout(() => {
                        _this.$refs.flagOutLoop.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.flagOutLoop.taskDeail(taskId);
                }
            } else if (taskType == 'loop_capture') {
                // _this.$refs.outband.taskDeail(taskId)
                if (!_this.componentsObj.loadingOutbandBtn) {
                    _this.componentsObj.loadingOutbandBtn = true;
                    setTimeout(() => {
                        _this.$refs.outband.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.outband.taskDeail(taskId);
                }
            } else if (taskType == 'checker') {
                if (!_this.componentsObj.loadingCheckerBtn) {
                    _this.componentsObj.loadingCheckerBtn = true;
                    setTimeout(() => {
                        _this.$refs.checker.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.checker.taskDeail(taskId);
                }
            } else if (taskType == 'loop_submit_flag') {
                if (!_this.componentsObj.loadingFlagComLoopBtn) {
                    _this.componentsObj.loadingFlagComLoopBtn = true;
                    setTimeout(() => {
                        _this.$refs.flagComLoop.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.flagComLoop.taskDeail(taskId);
                }
            } else if (taskType == 'loop_report') {
                if (!_this.componentsObj.loadingReportComLoopBtn) {
                    _this.componentsObj.loadingReportComLoopBtn = true;
                    setTimeout(() => {
                        _this.$refs.reportComLoop.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.reportComLoop.taskDeail(taskId);
                }
            }
        },
        openAllTaskPanel() {
            this.getAllTaskPanel = true;
            this.reachAllTask();
        },
        reachAllTask() {
            axios({
                url: 'process/tasks',
                type: 'get',
                params: {
                    testId: this.currentSceneId,
                    pageIndex: this.allTaskCurrentIndex,
                    pageSize: this.allTaskCurrentSize,
                    order: 'desc',
                    property: 'created',
                    taskMode: this.taskModalPanelCurrent,
                    status: this.taskStatusPanelCurrent,
                    taskType: 'EYDD',
                    node: this.taskNodePanelCurrent,
                    name: this.taskNameReach,
                },
            }).then((response) => {
                if (response.code == 1) {
                    this.taskDeailData = response.data.items;
                    this.allTaskTotal = response.data.total;
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        // 更新节点位置
        updateNodeLocation(nodeObj, type) {
            //判断是增加还是删除节点  修改节点
            let _this = this;
            if (type == 'sub') {
                _this.nodeLocationIdGroup.splice(
                    _this.nodeLocationIdGroup.findIndex((id) => id === nodeObj.id),
                    1
                );
                // _this.nodeLocationIdGroup.remove(nodeObj.id);
                for (let i = 0; i < _this.nodeLocationGroup.length; i++) {
                    //更新
                    if (nodeObj.id == _this.nodeLocationGroup[i].id) {
                        _this.nodeLocationIdGroup.splice(i, 1);
                        // _this.nodeLocationGroup.remove(_this.nodeLocationGroup[i]);
                    }
                }
            } else {
                if (_this.nodeLocationIdGroup.indexOf(nodeObj.id) == -1) {
                    //增加
                    _this.nodeLocationIdGroup.push(nodeObj.id);
                    _this.nodeLocationGroup.push(nodeObj);
                } else {
                    for (let i = 0; i < _this.nodeLocationGroup.length; i++) {
                        //更新
                        if (nodeObj.id == _this.nodeLocationGroup[i].id) {
                            _this.nodeLocationGroup[i].x = nodeObj.x;
                            _this.nodeLocationGroup[i].y = nodeObj.y;
                        }
                    }
                }
            }
        },
        createTaskPanel(x, y) {
            for (let index = 0; index < _this.nodeLocationGroup.length; index++) {
                const element = _this.nodeLocationGroup[index];
                if (Math.abs(x - element.x) <= 100) {
                    //比较X坐标
                    let nodeId = element.id;
                } else {
                    if (Math.abs(y - element.y) <= 50) {
                        //比较Y坐标
                    } else {
                        //创建节点面板
                    }
                }
            }
        },
        initializationTask() {},
        cancel() {},
        ok() {},
        listenTopoStatusChange(value) {
            this.lineType = value;
            if (value === 'select') {
                this.scene.mode = value;
            } else {
                this.scene.mode = 'normal';
            }
        },
        reachTextLabel(data, query) {
            return data.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        },
        moreChange() {
            this.userGroupDataTargetData = [];
            this.userGroupDataTargetDataSelect = [];
            this.userGroupData = [];
            this.taskTransfer = true;
            this.selectTasks = [];
            this.taskListNodeFalse(this.taskListCurrentPage, this.taskListItemPage);
        },
        rednerItemUserData(item) {
            return `<span >${item.label}</span>`;
        },
        listenChangeData(targetKeys, direction, moveKeys) {
            let _this = this;
            // console.log('listenChangeData', targetKeys);
            _this.userGroupDataTargetData = targetKeys;
        },
        updateTaskNode() {
            let _this = this;
            // userGroupDataTargetData
            if (_this.selectTasks.length != 0) {
                let pArr = _this.selectTasks.map(async (element) => {
                    if (element) {
                        await axios({
                            url: '/process/tasks/' + element.id + '?nodeId=' + _this.currentNode.id,
                            method: 'patch',
                        }).then((response) => {
                            if (response.code == 1) {
                                _this.taskTransfer = false;
                                _this.getNodeTaskList();
                                // _this.$Message.success('添加成功')
                            } else {
                                _this.taskTransferLoading = false;
                                _this.$nextTick(() => {
                                    _this.taskTransferLoading = true;
                                });
                                _this.$Message.error(response.message);
                                return false;
                            }
                        });
                    }
                    // _this.taskTransfer = false;
                    // _this.getNodeTaskList()
                });
                Promise.all(pArr).then((data) => {
                    _this.$Message.success('添加成功');
                    // _this.taskTransfer = false;
                    // _this.getNodeTaskList()
                });
            } else {
                _this.$Message.info('请选择要添加的任务');
            }
            _this.taskTransferLoading = false;
            _this.$nextTick(() => {
                _this.taskTransferLoading = true;
            });
        },
        cancelSelected() {
            this.userGroupDataTargetDataSelect = [];
            this.taskTransfer = false;
            this.taskListCurrentPage = 1;
        },
        updateRemoveTaskFormNode(element) {
            let _this = this;
            axios({
                url: '/process/tasks/' + element,
                method: 'patch',
            }).then((response) => {
                if (response.code == 1) {
                    _this.taskTransfer = false;
                    _this.taskData.length === 1 &&
                        _this.taskCurrentPage > 1 &&
                        _this.taskCurrentPage--;
                    _this.getNodeTaskList();
                    _this.$Message.success('移除成功');
                } else {
                    _this.taskTransferLoading = false;
                    _this.$nextTick(() => {
                        _this.taskTransferLoading = true;
                    });
                    _this.$Message.error(response.message);
                }
            });
        },
        // 节点里任务列表所有任务
        taskListNodeFalse(pageIndex, pageSize) {
            let _this = this;
            // console.log('yyy')
            _this.userGroupDataTargetData = [];
            _this.userGroupDataTargetDataSelect = [];
            _this.userGroupData = [];
            axios({
                url:
                    'process/tasks/' +
                    _this.currentSceneId +
                    '/normal' +
                    '?' +
                    'pageIndex=' +
                    pageIndex +
                    '&pageSize=' +
                    pageSize,
            }).then((response) => {
                if (response.code == 1) {
                    this.taskListTotal = response.data.total;
                    this.userGroupData = [];
                    let data = response.data.items;
                    this.userGroupData = data; //.filter(item => item.taskType === 'EYDD');
                } else {
                    this.$Message.error(response.message);
                }
            });
        },
        switchineTaskCurrentPage(numberPage) {
            this.taskCurrentPage = numberPage;
            this.getNodeTaskList();
        },
        switchTaskItemPage(numberSize) {
            this.taskItemPage = numberSize;
            this.getNodeTaskList();
        },
        getSelectedTableItem(value) {
            this.selectedData = value;
            this.getNodeTaskList();
        },
        switchineListTaskCurrentPage(numberPage) {
            this.taskListCurrentPage = numberPage;
            this.taskListNodeFalse(this.taskListCurrentPage, 10);
        },
        switchListTaskItemPage(numberSize) {
            this.taskListItemPage = numberSize;
            this.taskListNodeFalse(1, this.taskListItemPage);
        },
        //获取节点类型数据
        getNodeType(type) {
            let _text = null;
            switch (type) {
                case 'configSing':
                    _text = '单次型任务'; //配置型单次任务
                    break;
                case 'interSing':
                    _text = '交互型单次任务';
                    break;
                case 'dataSing':
                    _text = '数据型单次任务';
                    break;
                case 'dataPers':
                    _text = '持续型任务'; //数据持续型任务
                    break;
                case 'timePers':
                    _text = '周期交互型任务';
                    break;
                case 'userPers':
                    _text = '用户持续型任务';
                    break;
                case 'start':
                    // _text = "开始节点"
                    break;
                case 'stop':
                    // _text = "结束节点"
                    break;
                case 'process':
                    _text = '';
                    break;
                default:
                    break;
            }
            return _text;
        },
        // 简单连线
        defineLink(nodeA, nodeZ, text, dashedPattern) {
            var link = new JTopo.Link(nodeA, nodeZ, text);
            link.lineWidth = 3; // 线宽
            link.dashedPattern = dashedPattern; // 虚线
            link.bundleOffset = 60; // 折线拐角处的长度
            link.bundleGap = 20; // 线条之间的间隔
            link.textOffsetY = 3; // 文本偏移量（向下3个像素）
            link.strokeColor = '0,200,255';
            return link;
        },
        initDownloadPanel(nodeDataJson, linkDataJson, statusTask, p = '') {
            let editorTaskControl = this;
            var canvas = null;
            canvas = document.getElementById('drawCanvasTeaskNewForDownloadImg');
            // canvas.style.width = $("#contextBodyTaskPcNew").width() + 'px';
            // canvas.style.height = $("#contextBodyTaskPcNew").height() + 'px';
            this.staged = new JTopo.Stage(canvas);
            this.staged.topoLevel = 1;
            this.staged.parentLevel = 0;
            this.modeIdIndex = 0;
            this.scened = new JTopo.Scene(this.staged);
            this.scened.totalLevel = 1;
            this.scened = this.staged.childs[0];
            if (nodeDataJson) {
                $.each(nodeDataJson, function (i, item) {
                    editorTaskControl.modeIdIndex++;
                    // console.log(editorTaskControl)
                    editorTaskControl.createProcessNodeNewD(item, '', editorTaskControl);
                });
            }
            if (linkDataJson) {
                $.each(linkDataJson, function (i, item) {
                    let nodeA = editorTaskControl.getNodeByKeyD('id', item.source);
                    let nodeZ = editorTaskControl.getNodeByKeyD('id', item.target);
                    if (!nodeA || !nodeZ) {
                        return;
                    }
                    let line = new JTopo.FlexionalLink(nodeA, nodeZ);
                    line.strokeColor = '56,183,81';
                    line.id = item.id;
                    line.direction = 'horizontal';
                    line.arrowsRadius = 10;
                    line.lineWidth = 1.5; // 1.5 线宽
                    line.offsetGap = 10; //连线的最小长度/最大
                    line.bundleGap = 15; // 线条之间的间隔
                    line.textOffsetY = 10; // 文本偏移量（向下15个像素）
                    line.lineType = 'line';
                    //			line.lineWidth = self.config.lineWidth;
                    editorTaskControl.scened.add(line);
                });
            }
            //加载数据以后自动实现绘画功能
            var w = $('#contextBodyTaskPcNew').width(),
                wc = editorTaskControl.staged.canvas.width,
                h = $('#contextBodyTaskPcNew').height(),
                hc = editorTaskControl.staged.canvas.height;
            if (w > wc) {
                editorTaskControl.staged.canvas.width = $('#contextBodyTaskPcNew').width();
            }
            if (h > hc) {
                editorTaskControl.staged.canvas.height = $('#contextBodyTaskPcNew').height();
            }
            editorTaskControl.staged.paint();
            this.staged.frames = this.config.stageFrames;
            this.staged.wheelZoom = null;
            this.staged.eagleEye.visible = this.config.eagleEyeVsibleDefault;
            this.staged.centerAndZoom();
        },
        initializationEditorPanel(nodeDataJson, linkDataJson, statusTask, p = '') {
            let editorTaskControl = this;
            var canvas = document.getElementById('drawCanvasTeaskNew');
            // if(p=="experimenters"){
            //     canvas = document.getElementById('userCanvasPanel');
            //     canvas.style.width = $("#userCanvasGroup").width() + 'px';
            //     canvas.style.height = $("#userCanvasGroup").height()-3 + 'px';
            // }else{
            //     canvas = document.getElementById('drawCanvasTeaskNew');
            //     canvas.style.width = $("#contextBodyTaskPcNew").width() + 'px';
            //     canvas.style.height = $("#contextBodyTaskPcNew").height() + 'px';
            // }
            this.stage = new JTopo.Stage(canvas);
            this.stage.topoLevel = 1;
            this.stage.parentLevel = 0;
            this.modeIdIndex = 0;
            this.scene = new JTopo.Scene(this.stage);
            this.scene.totalLevel = 1;
            this.scene = this.stage.childs[0];
            let iamgeName = '';
            // console.log(crheetian)
            var that_this = this;
            let completedNodeGroup = [];
            let runningNodeGroup = [];
            let c = null;
            if (nodeDataJson) {
                // 父子映射关系
                // let findFathernodeByChild = {}
                // linkDataJson.map(m =>{ // { a: 3, b: 2 }
                //     findFathernodeByChild[m.target]= m.source
                // })

                $.each(nodeDataJson, function (i, item) {
                    // // const parentId = findFathernodeByChild[item.id]
                    // // if(parentId){
                    // //  const parentData = nodeDataJson.find(c =>{
                    // //      return c.id === parentId
                    // //  })
                    // //  if(parentData.nodeType != "start"&&parentData.nodeType != "stop" ){
                    // //  item.nodeType = parentData.nodeType
                    // // // console.log(parentData,'parentData')
                    // // }
                    // }

                    editorTaskControl.modeIdIndex++;
                    that_this.drawNodeByNodeType(item, that_this);
                });
            }
            if (linkDataJson) {
                $.each(linkDataJson, function (i, item) {
                    let nodeA = editorTaskControl.getNodeByKey('id', item.source);
                    let nodeZ = editorTaskControl.getNodeByKey('id', item.target);
                    // console.log('links', nodeZ.image.src);0
                    if (!nodeA || !nodeZ) {
                        return;
                    }
                    let line = new JTopo.FlexionalLink(nodeA, nodeZ);
                    if (completedNodeGroup.indexOf(item.source) != -1) {
                        line.strokeColor = '201,201,202';
                    } else {
                        line.strokeColor = '56,183,81';
                    }
                    line.id = item.id;
                    line.direction = 'horizontal';
                    line.arrowsRadius = 10;
                    line.lineWidth = 1.5; // 1.5 线宽
                    line.offsetGap = 10; //连线的最小长度/最大
                    line.bundleGap = 15; // 线条之间的间隔
                    line.textOffsetY = 10; // 文本偏移量（向下15个像素）
                    line.lineType = 'line';
                    //			line.lineWidth = self.config.lineWidth;
                    that_this.scene.add(line);
                });
            }
            //加载数据以后自动实现绘画功能
            var w = $('#contextBodyTaskPcNew').width(),
                wc = editorTaskControl.stage.canvas.width,
                h = $('#contextBodyTaskPcNew').height(),
                hc = editorTaskControl.stage.canvas.height;
            if (w > wc) {
                editorTaskControl.stage.canvas.width = $('#contextBodyTaskPcNew').width();
            }
            if (h > hc) {
                editorTaskControl.stage.canvas.height = $('#contextBodyTaskPcNew').height();
            }
            editorTaskControl.stage.paint();
            var self = this;
            this.stage.frames = this.config.stageFrames;
            this.stage.wheelZoom = null;
            this.stage.eagleEye.visible = this.config.eagleEyeVsibleDefault;
            //用来连线的两个节点
            this.tempNodeA = new JTopo.Node('tempA');
            this.tempNodeA.setSize(1, 1);
            this.tempNodeZ = new JTopo.Node('tempZ');
            this.tempNodeZ.setSize(1, 1);
            this.beginNode = null;
            this.link = null;
            self.scene.mode = 'normal';
            //双击编辑文字

            this.scene.mouseup(function (e) { // 右键菜单
              if(e.button == 2) {
                if (e.target) self.currentNode = e.target;
                else return;

                
                let clickdate = (e.target && e.target.data)||{}
                console.log('click--------点击的已经完成吗-------', clickdate.status)
                let isrunning = clickdate.status === "completed" // todo 运行中的执行 ,加入一个分数的修改节点
                if (isrunning) { // 
                  self.openScore(clickdate)
                }

                
              }

            })
            
            this.scene.dbclick(function (e) {
                if (e.target) self.currentNode = e.target;
                else return;
                //双击节点
                if (e.target != null && e.target instanceof JTopo.Node) {
                    // console.log('dbclick',e.target)
                    if (e.target.dataType == 'start' || e.target.dataType == 'stop') {
                        //是开始、结束节点变为不能配置，默认自动开始，自动结束
                        // that_this.disabledTaskBol = true;
                        // self.nodeAttributePanelStartEnd = true;
                        console.log('-----');
                    } else {
                        that_this.disabledTaskBol = false;
                        self.nodeAttributePanel = true;
                    }
                    self.objectData.nodeId = e.target.id;
                    self.nodeNameForPanel = e.target.text;
                    self.processNodeTypeName = self.getNodeType(e.target.dataType);

                    // $('#nodeAttributePanel').click();
                    // setTimeout(() => {
                    self.panelName = 'attr';
                    // }, 500);
                    // self.nextLevelSteps = self.nodesData.filter(node => node.deepIndex === e.target.level + 1);
                    self.nextLevelSteps = e.target.outLinks.map((link) => link.nodeZ.data);
                    if (self.nextLevelSteps.length > 1) {
                        self.nextStep = self.nextLevelSteps[0].id;
                    }
                    self.getNodeAttribute(e.target.id);
                    self.getNodeTaskList();
                    self.getNodeList(e.target.id);
                    // testControl.nodeTaskModals();
                } else if (e.target != null && e.target instanceof JTopo.Container) {
                    console.log(self.currentNode.data);
                    self.openFrameModal(self.currentNode.data);
                }
            });
            //失去焦点,设置节点文字
            //     //清除起始节点不完整的拖放线
            this.scene.mousedown(function (e) {
                if (
                    self.link &&
                    !self.isSelectedMode &&
                    (e.target == null || e.target === self.beginNode || e.target === self.link)
                ) {
                    this.remove(self.link);
                }
            });
            var ThisNode;
            var self_w = this.scene;
            var oLinkType;
            //处理右键菜单，左键连线
            self_w.mouseup(function (e, areaData) {
                // e.stopPropagation();
                // e.preventDefault();
                console.log(self_w.mouseDownEvent, e, this.areaData);
                if (
                    that_this.lineType === 'select' &&
                    this.areaData.width > 0 &&
                    this.areaData.height > 0
                ) {
                    //框选模式
                    // 获取选中的节点
                    let selectedNodes = that_this.getSelectedNodes();
                    if (selectedNodes.length <= 1) {
                        that_this.$Message.warning('请至少框选两个步骤');
                    } else if (selectedNodes.length > 1) {
                        //画一个框（container）节点
                        if (
                            selectedNodes.some((item) => {
                                return that_this.inFrame(item);
                            })
                        ) {
                            that_this.$Message.warning('请不要选择已经分类的步骤');
                        } else if (
                            selectedNodes.some(
                                (item) => item.nodeType === 'start' || item.nodeType === 'stop'
                            )
                        ) {
                            that_this.$Message.warning('请不要选择开始和结束步骤');
                        } else {
                            that_this.openFrameModal();
                            // that_this.autoCreateProcessFrame(this.areaData,selectedNodes)
                        }
                    }
                }
                clearTimeout(editorTaskControl.clearClickTimer);
                editorTaskControl.clearClickTimer = setTimeout(function () {
                    $('#childrenNode').hide();
                    $('#linePanel').hide();
                    $('#stopPanel').hide();
                    $('#pauseResverPanel').hide();
                    $('#containerMangeMenu').hide();
                    $('#groupMangeMenu').hide();
                    if (e.target) self.currentNode = e.target;
                    // editorTaskControl.utils.clearRuleLines();
                    else if (
                        e.target &&
                        e.target instanceof JTopo.Node &&
                        e.target.layout &&
                        e.target.layout.on &&
                        e.target.layout.type &&
                        e.target.layout.type != 'auto'
                    )
                        JTopo.layout.layoutNode(this, e.target, true, e);
                    if (e.button == 2) {
                        //右键菜单
                        $("div[id$='Menu']").hide();
                        //  e.stopPropagation();
                        var menuY = e.layerY ? e.layerY + 16 : e.offsetY + 16;
                        var menuX = e.layerX ? e.layerX + 16 + 200 : e.offsetX + 16;
                        if (e.target) {
                            //处理节点右键菜单事件
                            if (e.target instanceof JTopo.Node) {
                                var selectedNodes = editorTaskControl.getSelectedNodes();
                                //多节点
                                if (selectedNodes && selectedNodes.length > 1) {
                                    //判断边界出是否能完整显示弹出菜单
                                    if (menuX + $('#groupMangeMenu').width() >= self.stage.width) {
                                        menuX -= $('#groupMangeMenu').width();
                                    }
                                    if (
                                        menuY + $('#groupMangeMenu').height() >=
                                        self.stage.height
                                    ) {
                                        menuY -= $('#groupMangeMenu').height();
                                    }
                                    $('#groupMangeMenu')
                                        .css({
                                            top: menuY + 25,
                                            left: menuX,
                                        })
                                        .show();
                                } else {
                                    self.nodeJSONstrin = editorTaskControl.initNodeDeailInformation(
                                        self.currentNode.id
                                    );
                                    console.log(selectedNodes[0].dataType);
                                    if (
                                        selectedNodes[0].dataType == 'start' ||
                                        selectedNodes[0].dataType == 'process'
                                    ) {
                                        //右键开始按钮
                                        //判断边界出是否能完整显示弹出菜单
                                        if (
                                            menuX + $('#childrenNode').width() >=
                                            self.stage.width
                                        ) {
                                            menuX -= $('#childrenNode').width();
                                        }
                                        if (
                                            menuY + $('#childrenNode').height() >=
                                            self.stage.height
                                        ) {
                                            menuY -= $('#childrenNode').height();
                                        }
                                        $('#childrenNode')
                                            .css({
                                                top: menuY,
                                                left: menuX - 120,
                                            })
                                            .show();
                                    } else if (selectedNodes[0].dataType == 'stop') {
                                        if (menuX + $('#stopPanel').width() >= self.stage.width) {
                                            menuX -= $('#stopPanel').width();
                                        }
                                        if (menuY + $('#stopPanel').height() >= self.stage.height) {
                                            menuY -= $('#stopPanel').height();
                                        }
                                        $('#stopPanel')
                                            .css({
                                                top: menuY,
                                                left: menuX - 120,
                                            })
                                            .show();
                                    } else if (
                                        selectedNodes[0].dataType == 'pause' ||
                                        selectedNodes[0].dataType == 'recovery'
                                    ) {
                                        if (
                                            menuX + $('#pauseResverPanel').width() >=
                                            self.stage.width
                                        ) {
                                            menuX -= $('#pauseResverPanel').width();
                                        }
                                        if (
                                            menuY + $('#pauseResverPanel').height() >=
                                            self.stage.height
                                        ) {
                                            menuY -= $('#pauseResverPanel').height();
                                        }
                                    } else {
                                        if (
                                            menuX + $('#childrenNode').width() >=
                                            self.stage.width
                                        ) {
                                            menuX -= $('#childrenNode').width();
                                        }
                                        if (
                                            menuY + $('#childrenNode').height() >=
                                            self.stage.height
                                        ) {
                                            menuY -= $('#childrenNode').height();
                                        }
                                        $('#childrenNode')
                                            .css({
                                                top: menuY,
                                                left: menuX - 120,
                                            })
                                            .show();
                                    }
                                }
                            } else if (e.target instanceof JTopo.Link) {
                                //连线右键菜单
                                if (e.target.lineType == 'rule') {
                                    editorTaskControl.utils.hideRuleLines(); //删除标尺线
                                } else {
                                    $('#linePanel')
                                        .css({
                                            top: e.layerY ? e.layerY + 16 : e.offsetY + 16,
                                            left: e.layerX
                                                ? e.layerX + 16 + 200 - 120
                                                : e.offsetX + 16 + 200 - 120,
                                        })
                                        .show();
                                }
                            } else if (e.target instanceof JTopo.Container) {
                                //容器右键菜单
                                if (e.target.hasOwnProperty('netsubs')) {
                                    self.containerNetsubsMenu
                                        .css({
                                            top: e.layerY ? e.layerY : e.offsetY,
                                            left: e.layerX ? e.layerX : e.offsetX,
                                        })
                                        .show();
                                } else if (e.target.hasOwnProperty('netsubts')) {
                                    self.containerNetsubtsMenu
                                        .css({
                                            top: e.layerY ? e.layerY : e.offsetY,
                                            left: e.layerX ? e.layerX : e.offsetX,
                                        })
                                        .show();
                                } else {
                                    // self.containerMangeMenu
                                    $('#containerMangeMenu')
                                        .css({
                                            top: e.layerY ? e.layerY : e.offsetY,
                                            left: e.layerX ? e.layerX : e.offsetX,
                                        })
                                        .show();
                                }
                            }
                        } else {
                        }
                    } else if (e.button == 1) {
                        //中键
                    } else if (e.button == 0) {
                        //左键
                        //复制连线类型,方便连线时进行判断
                        if (self.lineType == 'drag') {
                            self.isSelectedMode = true;
                        } else if (self.lineType == '') {
                            //为镜像线做准备
                            self.isSelectedMode = false;
                            oLinkType = '';
                        } else if (self.lineType == 'dotted') {
                            //正常连线
                            self.isSelectedMode = false;
                            oLinkType = 'dotted';
                        } else if (self.lineType == 'direction') {
                            //方向线
                            self.isSelectedMode = false;
                            oLinkType = 'direction';
                        } else if (self.lineType == 'line') {
                            self.isSelectedMode = false;
                        } else {
                            self.isSelectedMode = true; //默认不连线
                        }
                        if (
                            e.target != null &&
                            (e.target instanceof JTopo.Node ||
                                e.target instanceof JTopo.Container) &&
                            !self.isSelectedMode
                        ) {
                            //开始连线
                            if (self.beginNode == null) {
                                $('#nodeIdClick_start').val(e.target.id);
                                $('#LineDestinationa').val(e.target.id);
                                self.startNodeLine = e.target.id;
                                var bol = e.target.issave;
                                self.beginNode = e.target;
                                if (e.target instanceof JTopo.Container) {
                                    if (self.link) this.remove(self.link);
                                    self.beginNode = null;
                                    return;
                                }
                                if (self.lineType == 'dotted') {
                                    self.link = new JTopo.Link(self.tempNodeA, self.tempNodeZ);
                                    self.link.lineType = 'dotted';
                                    self.link.lineWidth = self.config.lineWidth;
                                    self.link.dashedPattern = 2;
                                } else if (self.lineType == 'direction') {
                                    self.link = new JTopo.Link(self.tempNodeA, self.tempNodeZ);
                                    self.link.lineType = 'direction';
                                    self.link.direction = 'direction';
                                    self.link.lineWidth = 20;
                                } else if (self.lineType == 'line') {
                                    //为镜像线准备
                                    self.link = new JTopo.FlexionalLink(
                                        self.tempNodeA,
                                        self.tempNodeZ
                                    );
                                    self.link.direction = 'horizontal';
                                    self.link.arrowsRadius = 10;
                                    self.link.lineWidth = 1.5; // 线宽
                                    self.link.offsetGap = 20;
                                    self.link.bundleGap = 15; // 线条之间的间隔
                                    self.link.textOffsetY = 10; // 文本偏移量（向下15个像素）
                                    self.link.strokeColor = '201,201,202';
                                    self.link.lineType = 'line';
                                    self.link.lineWidth = self.config.lineWidth;
                                }
                                self.link.shadow = self.config.showLineShadow;
                                self.link.strokeColor = JTopo.util.randomColor();
                                self_w.add(self.link);
                                self.tempNodeA.setLocation(e.x, e.y);
                                self.tempNodeZ.setLocation(e.x, e.y);
                            } else if (
                                e.target &&
                                (e.target instanceof JTopo.Node ||
                                    e.target instanceof JTopo.Container) &&
                                self.beginNode !== e.target
                            ) {
                                //结束连线
                                //单机进行end
                                self.endNode = e.target;
                                self.endNodeLine = e.target.id;
                                var l;
                                if (self.lineType == 'line') {
                                    //为镜像线准备
                                    l = new JTopo.FlexionalLink(self.beginNode, self.endNode);
                                    l.direction = 'horizontal';
                                    l.arrowsRadius = 10;
                                    l.lineWidth = 1.5; // 线宽
                                    l.offsetGap = 20;
                                    l.bundleGap = 15; // 线条之间的间隔
                                    l.textOffsetY = 10; // 文本偏移量（向下15个像素）
                                    l.strokeColor = '56,183,81'; //拖拽连线松开鼠标后变色
                                    l.lineType = 'line';
                                    l.id = '';
                                    l.zIndex = 3;
                                } else if (self.lineType == 'dotted') {
                                    l = new JTopo.Link(self.beginNode, self.endNode);
                                    l.lineWidth = editorTaskControl.config.lineWidth;
                                    l.strokeColor = editorTaskControl.config.strokeColor;
                                    l.alpha = editorTaskControl.config.alpha;
                                    l.dashedPattern = editorTaskControl.config.dashedPattern;
                                    l.arrowsRadius = editorTaskControl.config.arrowsRadius;
                                    l.lineType = 'dotted';
                                    l.zIndex = 2;
                                } else if (self.lineType == 'direction') {
                                    l = new JTopo.Link(self.beginNode, self.endNode);
                                    l.lineType = 'direction';
                                    l.lineWidth = 20;
                                    l.strokeColor = '255,128,128';
                                    l.alpha = 1;
                                    l.arrowsRadius = 0;
                                    l.offsetGap = '30';
                                    l.zIndex = 5;
                                }
                                self_w.add(l);
                                self.createLink(self.startNodeLine, self.endNodeLine, l);
                                self.beginNode = null;
                                self.endNode = null;
                                self_w.remove(self.link);
                                self.link = null;
                                if (!self.oLIneBol) {
                                    $('#drag').click();
                                }
                            } else {
                                if (self.link) self_w.remove(self.link);
                                self.beginNode = null;
                            }
                        } else {
                            if (self.link) self_w.remove(self.link);
                            self.beginNode = null;
                        }
                        editorTaskControl.groupcount = [];
                        editorTaskControl.mouse_number = 0;
                        editorTaskControl.this_x = 0;
                        editorTaskControl.this_y = 0;
                        editorTaskControl.child_x = [];
                        editorTaskControl.child_y = [];
                        if (e.target != null) {
                            if (e.target.elementType == 'node' && e.button == 0) {
                                let this_node = editorTaskControl.getNodeByKey('id', e.target.id);
                                editorTaskControl.saveNodePosition({
                                    nodeType: this_node.dataType,
                                    testId: editorTaskControl.currentSceneId,
                                    id: this_node.id,
                                    title: this_node.text,
                                    x: this_node.x,
                                    y: this_node.y,
                                });
                            }
                        }
                    }
                }, 300);
            });
            this.scene.mousemove(function (e) {
                if (!self.isSelectedMode && self.beginNode);
                self.tempNodeZ.setLocation(e.x, e.y);
            });
            let linearr = [];
            let targetGroupXY = [];
            this.scene.mousedrag(function (e) {
                if (e.target != null) {
                    var bols = true;
                    function abc() {
                        $.each(JTopo.GroupContainerNode, function (i, item) {
                            if (e.target.id == item.id) {
                                bols = false;
                            }
                        });
                        return bols;
                    }
                    var abcd = abc();
                    if (!abcd) {
                        return;
                    }
                    if (e.target.elementType == 'node') {
                        editorTaskControl.mouse_number++;
                        if (e.target.dataType == 'VM') {
                            if (editorTaskControl.mouse_number == 1) {
                                targetGroupXY = [];
                            }
                            if (editorTaskControl.mouse_number == 2) {
                                let object_VM = {};
                                object_VM['x'] = e.target.x;
                                object_VM['y'] = e.target.y;
                                targetGroupXY.push(object_VM);
                            }
                        }
                        //拖动子网展示数据
                        if (e.target.dataType == 'VC') {
                            let oSnid = e.target.id;
                            $.each(JTopo.GroupContainerTopo, function (i, item) {
                                if (item.id == oSnid) {
                                    item.x = e.target.x + 20;
                                    item.y = e.target.y + 50 + 20;
                                }
                            });
                        }
                        //拖动网络下的展示数据
                        if (e.target.dataType == 'NW') {
                            if (editorTaskControl.mouse_number < 2) {
                                editorTaskControl.this_x = e.target.x;
                                editorTaskControl.this_y = e.target.y;
                                $.each(JTopo.GroupContainerNode, function (i, item) {
                                    editorTaskControl.child_x.push(item.x);
                                    editorTaskControl.child_y.push(item.y);
                                });
                            } else {
                                $.each(JTopo.GroupContainerNode, function (i, item) {
                                    if (item.finguer == e.target.id) {
                                        item.x =
                                            parseInt(editorTaskControl.child_x[i]) +
                                            parseInt(e.target.x) -
                                            parseInt(editorTaskControl.this_x);
                                        item.y =
                                            parseInt(editorTaskControl.child_y[i]) +
                                            parseInt(e.target.y) -
                                            parseInt(editorTaskControl.this_y);
                                    }
                                });
                            }
                        }
                    }
                    //拖动容器节点随动  container
                    if (e.target.elementType == 'div') {
                        $.each(JTopo.NodeGroupTopo, function (i, item) {
                            if (e.target.id == item.id) {
                                item.x = e.target.x - 20;
                                item.y = e.target.y - 50 - 20;
                            }
                        });
                    }
                }
            });
            this.stage.click(function (event) {
                // editorTaskControl.utils.hideRuleLines();
                if (event.button == 0) {
                    // 关闭弹出菜单（div）
                    $('#childrenNode').hide();
                    $('#linePanel').hide();
                    $('#stopPanel').hide();
                    $('#pauseResverPanel').hide();
                }
                $('#childrenNode').hide();
                $('#linePanel').hide();
                $('#stopPanel').hide();
                $('#pauseResverPanel').hide();
                $('#containerMangeMenu').hide();
                $('#groupMangeMenu').hide();
            });
            if (statusTask != 'initialized') {
                this.dataQueryInProgress();
            }
        },
        drawNodeByNodeType(item, that_this, value = '') {
            // console.log('drawNodeByNodeType', item)
            let _this = this;
            let nodeType = item.nodeType;
            var newNode = null;
            let fillColor = null;
            // if(item.status=="running"){
            if (nodeType == 'start') {
                //开始节点
                fillColor = '34,177,61';
            } else if (nodeType == 'stop') {
                //结束节点
                fillColor = '216,22,27';
            } else if (nodeType == 'configSing') {
                //配置单次
                fillColor = '7,105,173';
            } else if (nodeType == 'interSing') {
                //交互单次
                fillColor = '200,191,232';
            } else if (nodeType == 'dataSing') {
                //数据型单次
                fillColor = '163,73,164';
            } else if (nodeType == 'dataPers') {
                //数据交互型
                fillColor = '63,72,204';
            } else if (nodeType == 'timePers') {
                //周期交互型
                fillColor = '112,146,190';
            } else if (nodeType == 'userPers') {
                // 用户持续型
                fillColor = '0,162,232';
            } else if (nodeType == 'process') {
                //无任务节点 -- 灰色
                fillColor = '195,195,195';
            } else if (nodeType == 'mixture') {
                //多种任务类型
                fillColor = '7,105,173';
            }
           
            newNode = _this.createProcessNodeNew(item, fillColor, that_this, value);

            
            // }else{
            //     if(nodeType=="start"){//开始节点
            //         fillColor = '34,177,61';
            //     }else if(nodeType=="stop"){//结束节点
            //         fillColor = '216,22,27';
            //     }else if(nodeType=="configSing"){//配置单次
            //         fillColor = '7,105,173';
            //     }else if(nodeType=="interSing"){//交互单次
            //         fillColor = '200,191,232';
            //     }else if(nodeType=="dataSing"){ //数据型单次
            //         fillColor = '163,73,164';
            //     }else if(nodeType=="dataPers"){//数据交互型
            //         fillColor = '63,72,204';
            //     }else if(nodeType=="timePers"){//周期交互型
            //         fillColor = '112,146,190';
            //     }else if(nodeType=="userPers"){// 用户持续型
            //         fillColor = '0,162,232';
            //     }else if(nodeType=="process"){//无任务节点 -- 灰色
            //         fillColor = '195,195,195';
            //     }else if(nodeType=="mixture"){//多种任务类型
            //         fillColor = '7,105,173';
            //     }
            //     newNode = _this.createProcessNodeNew(item,fillColor,that_this,value);
            // }
            // that_this.scene.add(newNode);
        },
        myRoundNode(text, x, y) {
            var node = new JTopo.Node(text);
            node.percent = 0.1;
            node.beginDegree = 0;
            node.width = node.height = 34;
            node.setLocation(x, y);
            node.textPosition = 'Middle_Center';
            node.paint = function (g) {
                g.save();
                g.beginPath();
                g.moveTo(0, 0);
                g.fillStyle = 'rgba(22,155,213,' + this.alpha + ')'; //磨砂天蓝色
                g.arc(
                    0,
                    0,
                    this.width / 2,
                    this.beginDegree,
                    this.beginDegree + 2 * Math.PI * this.percent
                );
                g.fill();
                g.closePath();
                g.beginPath();
                g.fillStyle = 'rgba(0,0,255,' + this.alpha + ')'; //深蓝色
                g.moveTo(0, 0);
                g.arc(0, 0, this.width / 2 - 8, this.beginDegree, this.beginDegree + 2 * Math.PI);
                g.fill();
                g.closePath();
                g.restore();
                this.paintText(g);
            };
            // that_this.add(node);
            return node;
        },
        // 容器框
        drawNodeContainerD(data) {
            // if(data.width === 0 || data.height === 0){
            //     return
            // }
            // 不指定布局的时候，容器的布局为自动(容器边界随元素变化）
            var container = new JTopo.Container(data.name);
            container.textPosition = 'Top_Center';
            container.fontColor = '0,0,0';
            container.font = '16pt 微软雅黑';
            // container.fillColor = '255,255,255'//'56,183,81';
            container.id = data.id || new Date().getTime();
            container.data = data;
            container.alpha = 1;
            container.borderColor = '201,201,202';
            // '56,183,81';
            container.borderRadius = 0; // 圆角
            container.borderWidth = 2;
            container.padding = 10;
            container.x = Number(data.x);
            container.y = Number(data.y);
            container.width = Number(data.width);
            container.height = Number(data.height);
            container.dragable = false;
            container.selected = false;
            container.showSelected = true;
            container.dataType = 'step-frame';
            let nodes = data.frameStepList;
            nodes.forEach((item, i) => {
                let node = this.getNodeByKeyD('id', item.stepId);
                container.add(node);
            });
            this.scened.add(container);
        },
        // 容器框
        drawNodeContainer(data) {
            // if(data.width === 0 || data.height === 0){
            //     return
            // }
            // 不指定布局的时候，容器的布局为自动(容器边界随元素变化）
            var container = new JTopo.Container(data.name);
            container.textPosition = 'Top_Center';
            container.fontColor = '0,0,0';
            container.font = '14pt 微软雅黑';
            // container.fillColor = '255,255,255'//'56,183,81';
            container.id = data.id || new Date().getTime();
            container.data = data;
            container.alpha = 1;
            container.borderColor = '201,201,202';
            // '56,183,81';
            container.borderRadius = 0; // 圆角
            container.borderWidth = 2;
            container.padding = 10;
            container.x = Number(data.x);
            container.y = Number(data.y);
            container.width = Number(data.width);
            container.height = Number(data.height);
            container.dragable = false;
            container.selected = false;
            container.showSelected = true;
            container.dataType = 'step-frame';
            let nodes = data.frameStepList;
            nodes.forEach((item, i) => {
                let node = this.getNodeByKey('id', item.stepId);
                container.add(node);
            });
            this.scene.add(container);
        },
        openFrameModal(data) {
            this.$refs.frameForm.resetFields();
            if (data) {
                //修改
                this.frameModal.opType = 'update';
                this.frameForm = { ...data };
                this.frameModal.title = '修改分类';
            } else {
                //创建
                this.frameModal.title = '创建分类';
                // this.$refs.frameForm.resetFields();
                let selectedNodes = this.getSelectedNodes();
                //画一个框（container）节点
                if (
                    selectedNodes.some((item) => {
                        return this.inFrame(item);
                    })
                ) {
                    this.$Message.warning('请不要选择已经分类的步骤');
                    return;
                } else if (
                    selectedNodes.some(
                        (item) => item.nodeType === 'start' || item.nodeType === 'stop'
                    )
                ) {
                    this.$Message.warning('请不要选择开始和结束步骤');
                    return;
                } else if (selectedNodes.length < 2) {
                    this.$Message.warning('请至少选择两个步骤');
                    return;
                }
                this.frameModal.opType = 'add';
                this.frameForm.name = '';
                this.frameForm.description = '';
                this.frameForm.frameStepList = selectedNodes.map((item) => {
                    return {
                        id: '',
                        stepId: item.id,
                        stepName: item.text,
                    };
                });
                console.log(this.frameForm.frameStepList);
            }
            this.frameModal.show = true;
        },

        validateScore(rule, value, callback){
            //验证只能填入数字
        
            var reg = /^-?([1-9]\d{0,2}|1000)$/;
            if((value+'')==='0'){
              callback();
              return 
            }
            
          //验证警戒值
            if (value) {
              if (!reg.test(value)) {
                callback(new Error('请输入-1000~1000 的数字'));
              } else {
                callback();
              }
            } else {
              callback();
            }
        },

        closeScore(data){
          this.panelScore = false;
          this.$refs['formscore'].resetFields()
        },
      
        openScore(data){
          this.panelScore = true;
          let scoreModel = JSON.parse(JSON.stringify(data))

          if(this.step2Scoreid[scoreModel.id]){
            let scoreinfo = this.step2Scoreid[scoreModel.id]||{}
            scoreModel.score = scoreinfo.score
          }
          
          this.scoreModel = scoreModel
          
          
          this.$refs['formscore'].resetFields()
        },
        saveScore(){
          
          let _this = this
          let params = this.scoreModel
          let scoreinfo = this.step2Scoreid[this.scoreModel.id]||{}

          this.$refs['formscore'].validate((valid) => {
            if (valid) {
              let data = {
                score : Number(params.score)||0,
                sceneId:this.$route.query.id,
                stepId:this.scoreModel.id,
                stepName:this.scoreModel.title,
                type:'scoreRecord',
                id:scoreinfo.id||undefined
              }
              this.lodingScorebtn = true;
              saveSummarize(data).then(async (res) => {
                let { code, data, message } = res;
                if (code === 1) {
                  // this.getProcessFrame(); // 修改成功后查询一下
                  await this.getCompeteSummarizeScore()

                  this.dataQueryInProgress()
                  
                  this.$Message.success('保存成功');
                  this.frameModal.show = false;
                } else {
                  this.$Message.error('修改失败');
                }
                this.lodingScorebtn = false;
                this.panelScore = false;
              })
              .catch(error=>{
                this.$Message.error(error);
              })
              .finally(res=>{
                this.lodingScorebtn = false;
              })
            } else {
              this.$Message.error('请完善信息！');
            }
          })
          
          

        },
      
        saveProcessFrame(params) {
            saveProcessFrame(params)
                .then((res) => {
                    let { code, data, message } = res;
                    if (code === 1) {
                        this.getProcessFrame();
                        $('#groupMangeMenu').hide();
                        this.frameModal.show = false;
                    } else {
                        this.$Message.error('修改失败');
                    }
                    this.frameModal.loading = false;
                    setTimeout(() => {
                        this.frameModal.loading = true;
                    });
                })
                .catch((error) => {
                    this.frameModal.loading = false;
                    setTimeout(() => {
                        this.frameModal.loading = true;
                    });
                });
        },
        confirmSave() {
            this.$refs.frameForm
                .validate((valid) => {
                    if (valid) {
                        if (this.frameModal.opType === 'add') {
                            this.createProcessFrame();
                        } else {
                            this.saveProcessFrame(this.frameForm);
                        }
                    } else {
                        this.frameModal.loading = false;
                        setTimeout(() => {
                            this.frameModal.loading = true;
                        });
                    }
                })
                .catch((error) => {
                    this.frameModal.loading = false;
                    setTimeout(() => {
                        this.frameModal.loading = true;
                    });
                });
        },
        // 弹框创建
        createProcessFrame() {
            this.frameModal.loading = true;
            // this.$refs.frameForm.validate((valid) => {
            //     if(valid){
            // 获取选中的节点
            let selectedNodes = this.frameForm.frameStepList.map((item) => {
                return this.getNodeByKey('id', item.stepId);
            });
            let xArr = selectedNodes
                .map((item) => item.x)
                .sort((a, b) => {
                    return a - b > 0 ? 1 : -1;
                });
            let yArr = selectedNodes
                .map((item) => item.y)
                .sort((a, b) => {
                    return a - b > 0 ? 1 : -1;
                });
            let areaData = {
                x: xArr[0],
                y: yArr[0],
                width: Math.abs(xArr[xArr.length - 1] - xArr[0]),
                height: Math.abs(yArr[yArr.length - 1] - yArr[0]),
            };
            let params = {
                description: this.frameForm.description,
                frameStepList: this.frameForm.frameStepList.map((node) => {
                    console.log(node);
                    return {
                        frameId: '',
                        frameName: this.frameForm.description,
                        sceneId: this.currentSceneId,
                        stepId: node.stepId,
                        stepName: node.stepName,
                    };
                }),
                height: areaData.height,
                name: this.frameForm.name,
                sceneId: this.currentSceneId,
                width: areaData.width,
                x: areaData.x,
                y: areaData.y,
            };
            this.saveProcessFrame(params);
            //     }else{
            //         this.frameModal.loading = false;
            //         setTimeout(() => {
            //             this.frameModal.loading = true;
            //         })
            //     }
            // })
        },
        // 框选直接创建（暂时不用了）
        autoCreateProcessFrame(
            areaData,
            selectedNodes,
            name = '分类',
            description = '这是一个分类'
        ) {
            if (areaData.width === 0 || areaData.height === 0) {
                this.frameModal.loading = false;
                setTimeout(() => {
                    this.frameModal.loading = true;
                });
                return;
            }
            let params = {
                description: this.frameForm.description || description,
                frameStepList: selectedNodes.map((node) => {
                    console.log(node);
                    return {
                        frameId: '',
                        frameName: name,
                        sceneId: this.currentSceneId,
                        stepId: node.id,
                        stepName: node.text,
                    };
                }),
                height: areaData.height,
                name: this.frameForm.name || name,
                sceneId: this.currentSceneId,
                width: areaData.width,
                x: areaData.x,
                y: areaData.y,
            };
            this.saveProcessFrame(params);
        },
        inFrame(node) {
            if (!node) return false;
            let cnode = this.allContainerNode.find((cnode) => cnode.stepId === node.id);
            return cnode ? cnode : false;
            // return this.allContainerNode.map(node => node.stepId).includes(node.id);
        },
        canRemove(node) {
            let nodeInfo = this.inFrame(node);
            if (!nodeInfo) {
                return false;
            }
            let frame = this.frameList.find((frame) => frame.id === nodeInfo.frameId);
            return frame.frameStepList.length > 2 ? true : false;
        },
        getProcessFrame() {
            return new Promise((resolve, reject) => {
                getProcessFrame({ sceneId: this.currentSceneId })
                    .then((res) => {
                        let { code, data, message } = res;
                        if (code === 1) {
                         
                          
                            this.allContainerNode = data.reduce((prev, cur, index, arr) => {
                                let frameSteps = cur.frameStepList.map((step) => {
                                    return { ...step, frameName: cur.name };
                                });
                                return [...prev, ...frameSteps];
                            }, []);
                            this.frameList = data;
                            this.scene.childs.forEach((node) => {
                                if (node.elementType === 'container') {
                                    this.scene.remove(node);
                                }
                            });
                            this.scened.childs.forEach((node) => {
                                if (node.elementType === 'container') {
                                    this.scened.remove(node);
                                }
                            });
                            this.frameList.forEach((node) => {
                                this.drawNodeContainer(node);
                                this.drawNodeContainerD(node);
                            });
                            // console.log('所有被分类的节点',this.allContainerNode);
                            if (this.drillStatus === 2) {
                                this.upload();
                            }
                            resolve(data);
                        } else {
                            resolve([]);
                        }
                    })
                    .catch((error) => {
                        resolve([]);
                    });
            });
        },
        removeFrameNode(node, index) {
            if (index === 'req') {
                removeFrameNode(node.id)
                    .then((res) => {
                        let { code, data, message } = res;
                        if (code === 1) {
                            this.getProcessFrame();
                            $('#childrenNode').hide();
                            this.$Message.info('移出成功');
                        } else {
                            this.$Message.error('移出失败');
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                        this.$Message.error('移出失败');
                    });
            } else {
                this.frameForm.frameStepList.splice(index, 1);
            }
        },
        showFrameNodeModal(type) {
            this.frameNodeModal.show = true;
            this.frameNodeModal.frameId = this.frameList[0].id;
            this.frameNodeModal.type = type;
        },
        addFrameNode() {
            let data = {
                frameId: this.frameNodeModal.frameId,
                sceneId: this.currentSceneId,
                stepId: this.currentNode.id,
                stepName: this.currentNode.text,
            };
            addFrameNode(data)
                .then((res) => {
                    let { code, data, message } = res;
                    if (code === 1) {
                        this.$Message.info('加入成功');
                        $('#childrenNode').hide();
                        this.getProcessFrame();
                    } else {
                        this.$Message.error('加入失败');
                    }
                })
                .catch((error) => {
                    this.$Message.error('加入失败');
                });
        },
        delProcessFrame() {
            let id = this.currentNode.id;
            this.$Modal.confirm({
                title: '删除',
                content: '您确定要删除该分类吗？',
                onOk: () => {
                    delProcessFrame(id)
                        .then((res) => {
                            let { code, message } = res;
                            if (code === 1) {
                                this.$Message.info('删除成功');
                                $('#containerMangeMenu').hide();
                                let container = this.getContainerByKey('id', id);
                                this.scene.remove(container);
                                this.getProcessFrame();
                            } else {
                                this.$Message.error('删除失败');
                            }
                        })
                        .catch((error) => {
                            this.$Message.error('删除失败');
                        });
                },
                onCancel: () => {},
            });
        },
        createProcessNodeNewD(item, color, that_this, value = '') {
            let _this = this;
            var newNode = new JTopo.Node();
            newNode.id = item.id;
            newNode.data = item;
            newNode.level = item.deepIndex;
            newNode.alpha = _this.config.nodeAlpha;
            newNode.font = '16px/30px Consolas';
            newNode.fontColor = _this.config.nodeFontColor;
            newNode.borderRadius = 5;
            newNode.borderWidth = 0;
            newNode.borderColor = '255,255,255'; //'247,9,54';
            newNode.fillColor = '255,255,255';
            newNode.shadowOffsetX = _this.config.nodeShadowOffsetX;
            newNode.shadowOffsetY = _this.config.nodeShadowOffsetY;
            newNode.transformAble = true;
            newNode.visible = true;
            newNode.dragable = true;
            newNode.selected = false;
            newNode.showSelected = true;
            newNode.isMouseOver = false;
            newNode.topoLevel = 0;
            newNode.parentLevel = 0;
            newNode.width = 120;
            newNode.height = 34;
            newNode.deviceId = '' + new Date().getTime() * Math.random();
            newNode.x = item.x;
            newNode.y = item.y;
            newNode.text = item.title;
            // console.log('传递的节点文字',item.title);
            newNode.dataType = item.nodeType;
            newNode.textPosition = 'Middle_Center'; // 文字水平垂直居中
            newNode.nodeType = item.nodeType;
            this.setNodeImage(item, newNode);
            this.scened.add(newNode);
            return;
            // 步骤名称---溢出隐藏省略号
            // newNode.text =newNode.text.length > 10 ? '   ' + newNode.text.slice(0, 10) + '...' : newNode.text
            // 步骤名称换2行 不显示省略号 jtopo源码文件里！分割换行的方法
            // if(newNode.text.length > 10){
            //     newNode.text  = '   '+newNode.text.slice(0,10)+'!'+'   '+newNode.text.slice(10, 20);
            // }
            console.log(
                'xxxx2',
                newNode.text,
                newNode.nodeType,
                item.nodeType,
                item.autoStart,
                item.autoStop,
                newNode.dataType,
                item
            );
            if (
                item.nodeType != 'start' &&
                item.nodeType != 'stop' &&
                item.nodeType != 'pause' &&
                item.nodeType != 'recovery'
            ) {
                newNode.borderWidth = 1;
                newNode.strokeStyle = '200,200,200';
                newNode.strokeColor = '200,200,200';
                // AA
                if (item.autoStart === true && item.autoStop === true) {
                    if (newNode.dataType == 'configSing') {
                        newNode.setImage(
                            require('../../../../assets/processControl/aaconfigSing.png'),
                            true
                        );
                    }
                    if (newNode.dataType == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/aadataPers.png'),
                            true
                        );
                    }
                }
                // MM
                if (item.autoStart === false && item.autoStop === false) {
                    if (newNode.dataType == 'configSing') {
                        newNode.setImage(
                            require('../../../../assets/processControl/mmconfigSing.png'),
                            true
                        );
                    }

                    if (newNode.dataType == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/mmdataPers.png'),
                            true
                        );
                    }
                }
                // AM
                if (item.autoStart === true && item.autoStop === false) {
                    if (newNode.dataType == 'configSing') {
                        newNode.setImage(
                            require('../../../../assets/processControl/amconfigSing.png'),
                            true
                        );
                    }
                    if (newNode.dataType == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/amdataPers.png'),
                            true
                        );
                    }
                }
                // MA
                if (item.autoStart === false && item.autoStop === true) {
                    if (newNode.dataType == 'configSing') {
                        newNode.setImage(
                            require('../../../../assets/processControl/maconfigSing.png'),
                            true
                        );
                    }
                    if (newNode.dataType == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/madataPers.png'),
                            true
                        );
                    }
                }
            }
            // 开始图片
            if (item.nodeType === 'start') {
                newNode.text = '';
                newNode.setImage(require('../../../../assets/processControl/startS.png'), true);
            }
            // 结束图片
            if (item.nodeType === 'stop') {
                newNode.text = '';
                newNode.setImage(require('../../../../assets/processControl/stopS.png'), true);
            }
            this.scened.add(newNode);
        },

        createProcessNodeNew(item, color, that_this, value = '') {
          
            let _this = this;
            var newNode = new JTopo.Node();
            newNode.id = item.id;
            newNode.data = item;
            newNode.level = item.deepIndex;
            newNode.alpha = _this.config.nodeAlpha;
            newNode.font = _this.config.nodeFont;
            newNode.fontColor = _this.config.nodeFontColor;
            newNode.borderRadius = 5;
            newNode.borderWidth = 0;
            newNode.borderColor = '255,255,255'; //'247,9,54';
            newNode.fillColor = '255,255,255';
            newNode.shadowOffsetX = _this.config.nodeShadowOffsetX;
            newNode.shadowOffsetY = _this.config.nodeShadowOffsetY;
            newNode.transformAble = true;
            newNode.visible = true;
            newNode.dragable = true;
            newNode.selected = false;
            newNode.showSelected = true;
            newNode.isMouseOver = false;
            newNode.topoLevel = 0;
            newNode.parentLevel = 0;
            newNode.width = 120;
            newNode.height = 34;
            newNode.deviceId = '' + new Date().getTime() * Math.random();
            newNode.x = item.x;
            newNode.y = item.y;
            newNode.text = item.title;
            newNode.dataType = item.nodeType;
            newNode.textPosition = 'Middle_Center'; // 文字水平垂直居中
            newNode.nodeType = item.nodeType;
            this.setNodeImage(item, newNode);
            that_this.scene.add(newNode);
            return;
            // 步骤名称---溢出隐藏省略号
            // newNode.text =newNode.text.length > 10 ? '   ' + newNode.text.slice(0, 10) + '...' : newNode.text
            // 步骤名称换2行 不显示省略号 jtopo源码文件里！分割换行的方法
            // if(newNode.text.length > 10){
            //     newNode.text  = '   '+newNode.text.slice(0,10)+'!'+'   '+newNode.text.slice(10, 20);
            // }
            // console.log('xxxx2', newNode.text, newNode.nodeType, item.nodeType,item.autoStart,item.autoStop,newNode.dataType,item)
            if (
                item.nodeType != 'start' &&
                item.nodeType != 'stop' &&
                item.nodeType != 'pause' &&
                item.nodeType != 'recovery'
            ) {
                newNode.borderWidth = 1;
                newNode.strokeStyle = '200,200,200';
                newNode.strokeColor = '200,200,200';
                // AA
                if (item.autoStart === true && item.autoStop === true) {
                    if (newNode.dataType == 'configSing') {
                        newNode.setImage(
                            require('../../../../assets/processControl/aaconfigSing.png'),
                            true
                        );
                    }
                    if (newNode.dataType == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/aadataPers.png'),
                            true
                        );
                    }
                }
                // MM
                if (item.autoStart === false && item.autoStop === false) {
                    if (newNode.dataType == 'configSing') {
                        newNode.setImage(
                            require('../../../../assets/processControl/mmconfigSing.png'),
                            true
                        );
                    }

                    if (newNode.dataType == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/mmdataPers.png'),
                            true
                        );
                    }
                }
                // AM
                if (item.autoStart === true && item.autoStop === false) {
                    if (newNode.dataType == 'configSing') {
                        newNode.setImage(
                            require('../../../../assets/processControl/amconfigSing.png'),
                            true
                        );
                    }
                    if (newNode.dataType == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/amdataPers.png'),
                            true
                        );
                    }
                }
                // MA
                if (item.autoStart === false && item.autoStop === true) {
                    if (newNode.dataType == 'configSing') {
                        newNode.setImage(
                            require('../../../../assets/processControl/maconfigSing.png'),
                            true
                        );
                    }
                    if (newNode.dataType == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/madataPers.png'),
                            true
                        );
                    }
                }
            }
            // 开始图片
            if (item.nodeType === 'start') {
                newNode.text = '';
                newNode.setImage(require('../../../../assets/processControl/startS.png'), true);
            }
            // 结束图片
            if (item.nodeType === 'stop') {
                newNode.text = '';
                newNode.setImage(require('../../../../assets/processControl/stopS.png'), true);
            }
            // console.log(that_this);
            that_this.scene.add(newNode);
        },
        setNodeImage(item, node) {
            let newNode = node;
            // AA
            if (item.autoStart === true && item.autoStop === true) {
                if (newNode.dataType == 'configSing') {
                    newNode.setImage(
                        require('../../../../assets/processControl/aaconfigSing.png'),
                        true
                    );
                }
                if (newNode.dataType == 'dataPers') {
                    newNode.setImage(
                        require('../../../../assets/processControl/aadataPers.png'),
                        true
                    );
                }
            }
            // MM
            if (item.autoStart === false && item.autoStop === false) {
                if (newNode.dataType == 'configSing') {
                    newNode.setImage(
                        require('../../../../assets/processControl/mmconfigSing.png'),
                        true
                    );
                }
                if (newNode.dataType == 'dataPers') {
                    newNode.setImage(
                        require('../../../../assets/processControl/mmdataPers.png'),
                        true
                    );
                }
            }
            // AM
            if (item.autoStart === true && item.autoStop === false) {
                if (newNode.dataType == 'configSing') {
                    newNode.setImage(
                        require('../../../../assets/processControl/amconfigSing.png'),
                        true
                    );
                }
                if (newNode.dataType == 'dataPers') {
                    newNode.setImage(
                        require('../../../../assets/processControl/amdataPers.png'),
                        true
                    );
                }
            }
            // MA
            if (item.autoStart === false && item.autoStop === true) {
                if (newNode.dataType == 'configSing') {
                    newNode.setImage(
                        require('../../../../assets/processControl/maconfigSing.png'),
                        true
                    );
                }
                if (newNode.dataType == 'dataPers') {
                    newNode.setImage(
                        require('../../../../assets/processControl/madataPers.png'),
                        true
                    );
                }
            }
            // 开始图片
            if (item.nodeType === 'start') {
                newNode.text = '';
                newNode.setImage(require('../../../../assets/processControl/startS.png'), true);
            }
            // 结束图片
            if (item.nodeType === 'stop') {
                newNode.text = '';
                newNode.setImage(require('../../../../assets/processControl/stopS.png'), true);
            }
        },
        getContainerByKey(key, value) {
            var node = null;
            this.stage.childs.forEach(function (s) {
                s.childs.forEach(function (n) {
                    if (n.elementType === 'container' && n[key] == value) {
                        node = n;
                        return node;
                    }
                });
            });
            return node;
        },
        getNodeByKeyD(key, value) {
            var node = null;
            this.staged.childs.forEach(function (s) {
                s.childs.forEach(function (n) {
                    if (n.elementType === 'node' && n[key] == value) {
                        node = n;
                        return node;
                    }
                });
            });
            return node;
        },
        getNodeByKey(key, value) {
            var node = null;
            this.stage.childs.forEach(function (s) {
                s.childs.forEach(function (n) {
                    if (n.elementType === 'node' && n[key] == value) {
                        node = n;
                        return node;
                    }
                });
            });
            return node;
        },
        getLinekByKey(key, value) {
            var node = null;
            this.stage.childs.forEach(function (s) {
                s.childs.forEach(function (n) {
                    if (n.elementType == 'link' && n[key] == value) {
                        node = n;
                        return node;
                    }
                });
            });
            return node;
        },
        //获取当前节点
        getSelectedNodes(includeContainer) {
            var selectedNodes = [];
            var nodes = this.scene.selectedElements;
            return (
                nodes.forEach(function (n) {
                    if (n.elementType === 'node') selectedNodes.push(n);
                    if (includeContainer && n.elementType === 'div') selectedNodes.push(n);
                }),
                selectedNodes
            );
        },
        initNodeDeailInformation(nodeId) {
            this.nodeJSONstring = this.getNodeByKey('id', nodeId);
        },
        getEditorData() {
            return new Promise((resolve, reject) => {
                axios({
                    url: '/process/tests/' + this.currentSceneId + '/editor',
                }).then((response) => {
                    if (response.code == 1) {
                        resolve(response.data);
                    } else {
                        reject(response.message);
                    }
                });
            }).catch((error) => {
                reject(error);
            });
        },
        // 画图的函数
        async loadProcessData() {
            let _this = this;
            let {
                nodes: nodesData,
                links: lines,
                status: statusTask,
            } = await this.getEditorData().catch((error) => {
                this.$Message.error(response.message);
            });
            _this.taskStatus = statusTask;
            // 更新详情页任务状态
            _this.detailParent.setProcessStatus(statusTask);
            // 判断是否连线完成
            let finish = nodesData.every((node) => {
                let line = lines.filter(
                    (line) => line.source === node.id || line.target === node.id
                );
                return line.length >= (node.nodeType === 'configSing' ? 2 : 1) ? true : false;
            });
            _this.detailParent.setHasTarget(finish ? true : false);
            // 存一下nodesData
            _this.nodesData = nodesData;
            _this.initializationEditorPanel(nodesData, lines, statusTask);
            _this.initDownloadPanel(nodesData, lines, statusTask);
            this.getProcessFrame();
            _this.nodeLocationIdGroup = [];
            _this.nodeLocationGroup = nodesData;
            for (let i = 0; i < nodesData.length; i++) {
                _this.nodeLocationIdGroup.push(nodesData[i].id);
            }
        },
        // 保存节点位置
        saveNodePosition(obj) {
            let _this = this;
            axios({
                url:
                    '/process/nodes/' +
                    obj.id +
                    '/point?x=' +
                    Number(obj.x) +
                    '&y=' +
                    Number(obj.y),
                method: 'PATCH',
            }).then((response) => {
                if (response.code == 1) {
                    _this.updateNodeLocation(obj, 'add');
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        initNodeFindChildrenNode(obj) {
            let _this = this;
            return axios({
                url: '/process/nodes/' + obj.id + '/links',
            }).then((response) => {
                if (response.code == 1) {
                    let steps = {};
                    steps['count'] = Number(response.data.sources.length);
                    steps['oList'] = response.data.sources;
                    return steps;
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        // 添加子步骤调用的函数
        addChildrenStep(value) {
            $('#childrenNode').hide();
            this.addChildrenNodeAndLink();
        },
        // 创建子步骤节点和连线
        async addChildrenNodeAndLink() {
            let stepNumbers = null;
            let _this = this;
            await this.initNodeFindChildrenNode(this.nodeJSONstring).then((value) => {
                // console.log(value)
                stepNumbers = value;
            });
            let bol = this.changeNodePosition(stepNumbers.oList, stepNumbers.count);
            // console.log(stepNumbers);
            let oX = this.nodeJSONstring.x + 234;
            let oY;
            //生成一个节点
            var newNode = new JTopo.Node();
            newNode.id = '';
            newNode.alpha = _this.config.nodeAlpha;
            newNode.strokeColor = _this.config.nodeStrokeColor;
            newNode.shadow = _this.config.nodeShadow;
            newNode.shadowColor = _this.config.nodeShadowColor;
            newNode.font = _this.config.nodeFont;
            newNode.fontColor = _this.config.nodeFontColor;
            newNode.borderRadius = 5;
            newNode.borderWidth = 0;
            newNode.borderColor = '255,255,255';
            newNode.fillColor = '255,255,255'; //添加子步骤的填充色
            newNode.shadowOffsetX = _this.config.nodeShadowOffsetX;
            newNode.shadowOffsetY = _this.config.nodeShadowOffsetY;
            newNode.transformAble = true;
            newNode.visible = true;
            newNode.dragable = true;
            newNode.selected = false;
            newNode.showSelected = true;
            newNode.isMouseOver = false;
            newNode.topoLevel = 0;
            newNode.parentLevel = 0;
            newNode.arrowsRadius = 10;
            newNode.width = 120;
            newNode.height = 34;
            newNode.deviceId = '' + new Date().getTime() * Math.random();
            newNode.dataType = 'process';
            newNode.textPosition = 'Middle_Center'; // 文字水平垂直居中
            newNode.overflow = 'hidden';
            newNode.text_overflow = 'ellipsis';
            newNode.white_space = 'nowrap';
            newNode.text = '步骤' + ++this.modeIdIndex;
            if (!bol) {
                oY = this.nodeJSONstring.y - ((stepNumbers.count + 1) / 2) * 100;
            } else {
                oY = this.nodeJSONstring.y;
            }
            newNode.setLocation(oX, oY);
            let saveNodeId = '';
            await this.addNodeChildrenSaveNodeAndLine('步骤' + this.modeIdIndex, oX, oY).then(
                (value) => {
                    saveNodeId = value;
                }
            );
            if (saveNodeId) {
                newNode.id = saveNodeId;
                this.scene.add(newNode);
                let oLineId = '';
                await this.createLink(this.nodeJSONstring.id, saveNodeId, '').then((value) => {
                    console.log(value);
                    oLineId = value;
                });
                if (oLineId) {
                    this.createLinkTopo(
                        this.getNodeByKey('id', this.nodeJSONstring.id),
                        newNode,
                        oLineId
                    );
                }
            }
            // 步骤名称---溢出隐藏省略号
            // if(newNode.text.length > 10){
            //     newNode.text = '   ' + newNode.text.slice(0,10) + '|' + '   ' + newNode.text.slice(10,20);
            // }
            // console.log('xxxx', item)
            if (
                item.nodeType != 'start' &&
                item.nodeType != 'stop' &&
                item.nodeType != 'process' &&
                item.nodeType != 'pause' &&
                item.nodeType != 'recovery'
            ) {
                // AA
                if (item.auoStart === true && item.autoStop === true) {
                    if (newNode.dataType == 'configSing') {
                        newNode.setImage(
                            require('../../../../assets/processControl/aaconfigSing.png')
                        );
                    }
                    if (newNode.dataType == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/aadataPers.png')
                        );
                    }
                }
                // MM
                if (item.sutoStart === false && item.autoStop === false) {
                    if (newNode.dataType == 'configSing') {
                        newNode.setImage(
                            require('../../../../assets/processControl/mmconfigSing.png')
                        );
                    }
                    if (newNode.Type == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/mmdataPers.png')
                        );
                    }
                }
                // AM
                if (item.autoStart === true && item.autoStop == false) {
                    if (newNode.dataType == 'configSing') {
                        newNode.setImage(
                            require('../../../../assets/processControl/amconfigSing.png')
                        );
                    }
                    if (newNode.dataType == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/amdataPers.png')
                        );
                    }
                }
                //  MA
                if (item.autoStart === false && item.autoStop === true) {
                    if (newNode.nodeType == 'configSing') {
                        newNode.setImage(
                            reuire('../../../../assets/processControl/maconfigSing.png')
                        );
                    }
                    if (newNode.nodeType == 'dataPers') {
                        newNode.setImage(
                            require('../../../../assets/processControl/madataPers.png')
                        );
                    }
                }
                //  文字水平垂直居中
                newNode.textPosition = 'Middle_Center';
            }
        },
        /**
         * @description: 添加子步骤核心代码
         * @param {type}
         * @return:
         */
        changeNodePosition(GroupId, n) {
            let _this = this;
            let y_value = 100;
            let x_value = 234;
            //第一步先拿到母节点
            let nodeMother = _this.getNodeByKey('id', _this.nodeJSONstring.id);
            let oX = nodeMother.x;
            let oY = nodeMother.y;
            let unevenNumberBol = true;
            let currentNode, xN, yN;
            if (GroupId) {
                $.each(GroupId, function (i, item) {
                    currentNode = _this.getNodeByKey('id', item);
                    let oValue = i / 2;
                    if (i % 2 == 0) {
                        if (i == 0) {
                            currentNode.setLocation(oX + x_value, oY + (i + 1) * y_value);
                            yN = oY + (i + 1) * y_value;
                        } else {
                            currentNode.setLocation(oX + x_value, oY + (i / 2 + 1) * y_value);
                            yN = oY + (i / 2 + 1) * y_value;
                        }
                        xN = oX + x_value;
                        console.log(oY + '==' + yN + '==' + i + '上');
                    } else {
                        if (i == 1) {
                            currentNode.setLocation(oX + x_value, oY - i * y_value);
                            xN = oX + x_value;
                            yN = oY - i * y_value;
                        } else {
                            currentNode.setLocation(oX + x_value, oY - ((i + 1) / 2) * y_value);
                            xN = oX + x_value;
                            yN = oY - ((i + 1) / 2) * y_value;
                        }
                        console.log(oY + '==' + yN + '==' + i + '下');
                    }
                    _this.saveNodePosition({
                        id: item,
                        x: xN,
                        y: yN,
                    });
                });
                if (parseInt(n) % 2 == 0) {
                    //偶数
                    unevenNumberBol = true;
                    //计算节点的位置
                } else {
                    //奇数
                    unevenNumberBol = false;
                }
            }
            //判断子节点的个数是奇数还是偶数
            return unevenNumberBol;
        },
        addNodeChildrenSaveNodeAndLine(text, x, y) {
            let _this = this;
            return axios({
                url: '/process/nodes',
                method: 'POST',
                data: {
                    nodeType: 'process',
                    testId: this.currentSceneId,
                    title: text,
                    x: x,
                    y: y,
                },
            }).then((response) => {
                if (response.code == 1) {
                    return response.data.id;
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        /**
         * @description: 检查是否有别的连线
         * @param {type}
         * @return:
         */
        detectsAnotherConnection() {
            let _this = this;
            return axios({
                url: '/process/tests/' + _this.currentSceneId + '/editor',
            }).then((response) => {
                if (response.code == 1) {
                    return response.data.links;
                } else {
                }
            });
        },
        /**
         * 创建新的连线
         */
        async createLink(sourceId, targetId, line) {
            let _this = this;
            // let {links:oLineks} = await this.getEditorData()
            // let targetGroup = [];
            // $.each(oLineks, function(i,item) {
            //     targetGroup.push(item.target);
            // });
            // if(targetGroup.indexOf(targetId)!=-1){
            // }
            let oLinks = line.nodeZ.inLinks
                .filter((link) => link.id)
                .map((link) => link.nodeA.id); //连到目标节点的点
            let iLinks = line.nodeZ.outLinks
                .filter((link) => link.id)
                .map((link) => link.nodeZ.id); //目标节点连接出去的点
            if (iLinks.includes(sourceId) || oLinks.includes(sourceId)) {
                //两点间已经有连线
                this.scene.remove(line);
                return;
            }
            return axios({
                url: '/process/links',
                method: 'POST',
                data: {
                    source: sourceId,
                    target: targetId,
                },
            }).then((response) => {
                if (response.code == 1) {
                    if (line) {
                        // console.log(line,'xshui')
                        line.id = response.data.id;
                    }
                    return response.data.id;
                } else {
                    if (line) {
                        _this.scene.remove(line);
                    }
                    _this.$Message.error(response.message);
                }
            });
        },
        createLinkTopo: function (nodeA, nodeZ, oid) {
            var link = new JTopo.FlexionalLink(nodeA, nodeZ);
            link.direction = 'horizontal';
            link.arrowsRadius = 10;
            link.lineWidth = 1.5; // 线宽
            link.offsetGap = 20;
            link.bundleGap = 15; // 线条之间的间隔
            link.textOffsetY = 10; // 文本偏移量（向下15个像素）
            link.strokeColor = '201,201,202';
            link.id = oid;
            this.scene.add(link);
            return link;
        },
        deleteStep() {
            $('#childrenNode').hide();
            $('#stopPanel').hide();
            let _this = this;
            this.$Modal.confirm({
                title: '删除',
                content: '您确定要删除该步骤吗？',
                onOk: () => {
                    _this.deleteNode();
                },
                onCancel: () => {},
            });
        },
        deleteNode() {
            let _this = this;
            axios({
                url: '/process/nodes/' + _this.currentNode.id,
                method: 'DELETE',
            }).then((response) => {
                if (response.code == 1) {
                    _this.modeIdIndex--;
                    _this.scene.remove(_this.getNodeByKey('id', _this.currentNode.id));
                    _this.beginNode = null;
                    _this.updateNodeLocation({ id: _this.currentNode.id }, 'sub');
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        deleteLine(targetId, line) {
            $('#linePanel').hide();
            let _this = this;
            this.$Modal.confirm({
                title: '删除',
                content: '您确定要删除该连线吗？',
                onOk: () => {
                    // _this.deleteNode();
                    axios({
                        url: '/process/links/' + targetId,
                        method: 'DELETE',
                    }).then((response) => {
                        if (response.code == 1) {
                            if (line) {
                                _this.scene.remove(line);
                            }
                        } else {
                            _this.$Message.error(response.message);
                        }
                    });
                },
                onCancel: () => {},
            });
        },
        dragImage(modeDiv, drawArea, text) {
            console.log(modeDiv);
            console.log(drawArea);
            drawArea = document.getElementById('drawCanvasTeaskNew');
            if (!text) text = '';
            var self = this;
            console.log(text);
            //拖拽开始,携带必要的参数 [增加参数vmtype]
            modeDiv.ondragstart = function (e) {
                e = e || window.event;
                try {
                    //IE只允许KEY为text和URL
                    e.dataTransfer.setData(
                        'text',
                        backImg + ';' + text + ';' + datatype + ';' + vmtype + ';' + tamplteId
                    );
                } catch (ex) {}
                return false;
            };
            //阻止默认事件
            drawArea.ondragover = function (e) {
                e.preventDefault();
                return false;
            };
            //创建节点 [增加参数vmtype]
            drawArea.ondrop = function (e) {
                e = e || window.event;
                var data = e.dataTransfer.getData('text');
                var img, text, datatype, vmtype, tamplteId;
                if (data) {
                    var datas = data.split(';');
                    console.log(datas);
                    console.log(datas.length);
                    if ((datas && datas.length == 5) || datas.length == 4) {
                        img = datas[0];
                        text = datas[1];
                        datatype = datas[2];
                        vmtype = datas[3];
                        tamplteId = datas[4];
                        testControl.createNode(e, text, img, datatype);
                    }
                }

                if (e.preventDefault()) {
                    e.preventDefault();
                    return false;
                }
                if (e.stopPropagation()) {
                    e.stopPropagation();
                    return false;
                }
            };
        },
        createNodeData(e, dataType) {
            let _this = this;
            let text =
                dataType == 'stop' ? '结束' + ++this.modeIdIndex : '步骤' + ++this.modeIdIndex;
            let _img =
                dataType == 'stop'
                    ? './static/processControl/end.png'
                    : './static/processControl/step.png';
            // console.log(dataType,'创建节点');
            let taskType = null;
            if (dataType != 'stop') {
                taskType = dataType.split('-')[1];
                dataType = dataType.split('-')[0];
            }
            let OX =
                (e.layerX ? e.layerX : e.offsetX) -
                this.scene.translateX -
                this.config.defaultWidth / 2;
            let OY =
                (e.layerY ? e.layerY : e.offsetY) -
                this.scene.translateY -
                this.config.defaultHeight / 2;
            //判断是新增节点还是添加任务
            let bol = true,
                currentNodeId = null;
            // for (let index = 0; index < _this.nodeLocationGroup.length; index++) {
            //   const element = _this.nodeLocationGroup[index];
            //   // console.log(element);
            //   if (Math.abs(OX - element.x) <= 100 && Math.abs(OY - element.y) <= 50) {
            //     //比较X坐标
            //     if (element.nodeType == 'stop' || element.nodeType == 'start') {
            //       if (element.nodeType == 'stop') {
            //         _this.$Message.info('结束节点不允许配置任务');
            //       } else if (element.nodeType == 'start') {
            //         _this.$Message.info('开始节点不允许配置任务');
            //       }
            //       return;
            //     } else {
            //       currentNodeId = element.id;
            //       bol = false;
            //       break;
            //     }
            //   }
            // }
            // console.log('添加节点吗',bol);
            if (bol) {
                let nodeDefaultAttr = JSON.parse(JSON.stringify(this.nodeDefaultAttr));
                this.propertiesData = Object.values(nodeDefaultAttr);
                this.properties = {};
                if (this.propertiesData.length != 0) {
                    let attrData = _this.propertiesData;
                    for (let index = 0; index < attrData.length; index++) {
                        const element = attrData[index];
                        if (element.key) {
                            if (element.type === 'default') {
                                if (element.checked) {
                                    _this.properties[element.key] = element.value;
                                }
                            } else {
                                _this.properties[element.key] = element.value;
                            }
                        }
                    }
                }
                axios({
                    url: '/process/nodes',
                    method: 'POST',
                    data: {
                        nodeType: dataType,
                        testId: _this.currentSceneId,
                        preCondition: 'any',
                        properties: _this.properties,
                        title: text,
                        x:
                            (e.layerX ? e.layerX : e.offsetX) -
                            this.scene.translateX -
                            this.config.defaultWidth / 2,
                        y:
                            (e.layerY ? e.layerY : e.offsetY) -
                            this.scene.translateY -
                            this.config.defaultHeight / 2,
                    },
                })
                    .then((data) => {
                        if (data.code == 1) {
                            // let oId = response.data.id;
                            console.log(data.data.id);
                            _this.nodeLocationGroup.push(data.data), //存储位置
                                _this.nodeLocationIdGroup.push(data.data.id),
                                _this.drawNodeByNodeType(data.data, _this);
                            // _this.createNodeProcess(e,text,_img,dataType,data.data.id);
                            if (taskType != 'p') {
                                console.log(taskType);
                                _this.showKindofTask(taskType, data.data.id);
                            }
                        } else {
                            _this.modeIdIndex--;
                            _this.$Message.error(data.message);
                        }
                    })
                    .catch((error) => {
                        this.modeIdIndex--;
                    });
            } else {
                this.showKindofTask(taskType, currentNodeId);
            }
        },
        createNodeTopo(e, text, img, type, oid) {
            var newNode = new JTopo.Node();
            newNode.id = oid;
            newNode.alpha = this.config.nodeAlpha;
            newNode.strokeColor = this.config.nodeStrokeColor;
            newNode.fillColor = this.config.nodeFillColor;
            newNode.shadow = this.config.nodeShadow;
            newNode.shadowColor = this.config.nodeShadowColor;
            newNode.font = this.config.nodeFont;
            newNode.fontColor = this.config.nodeFontColor;
            newNode.borderRadius = this.config.nodeBorderRadius;
            newNode.shadowOffsetX = this.config.nodeShadowOffsetX;
            newNode.shadowOffsetY = this.config.nodeShadowOffsetY;
            newNode.transformAble = true;
            newNode.visible = true;
            newNode.dragable = true;
            newNode.selected = false;
            newNode.showSelected = true;
            newNode.isMouseOver = false;
            newNode.topoLevel = 0;
            newNode.parentLevel = 0;
            newNode.width = this.config.defaultWidth;
            newNode.height = this.config.defaultWidth;
            newNode.deviceId = '' + new Date().getTime() * Math.random();
            newNode.nodeType = type;
            newNode.setBound(
                (e.layerX ? e.layerX : e.offsetX) -
                    this.scene.translateX -
                    this.config.defaultWidth / 2,
                (e.layerY ? e.layerY : e.offsetY) -
                    this.scene.translateY -
                    this.config.defaultHeight / 2,
                this.config.defaultWidth,
                this.config.defaultHeight
            );
            newNode.setImage(img);
            newNode.text = text;
            // console.log()
            newNode.dataType = type;
            this.scene.add(newNode);
        },
        createNodeProcess(e, text, img, type, oid) {
            let _this = this;
            var newNode = new JTopo.Node();
            newNode.id = oid;
            //newNode.alarm = _this.getScorebyStepid(oid)
            newNode.alpha = _this.config.nodeAlpha;
            newNode.strokeColor = _this.config.nodeStrokeColor;
            newNode.shadow = _this.config.nodeShadow;
            newNode.shadowColor = _this.config.nodeShadowColor;
            newNode.font = _this.config.nodeFont;
            newNode.fontColor = _this.config.nodeFontColor;
            newNode.borderRadius = 5;
            newNode.borderWidth = 0;
            newNode.borderColor = '255,255,255';
            newNode.shadowOffsetX = _this.config.nodeShadowOffsetX;
            newNode.shadowOffsetY = _this.config.nodeShadowOffsetY;
            newNode.transformAble = true;
            newNode.visible = true;
            newNode.dragable = true;
            newNode.selected = false;
            newNode.showSelected = true;
            newNode.isMouseOver = false;
            newNode.topoLevel = 0;
            newNode.parentLevel = 0;
            newNode.width = 120;
            newNode.height = 34;
            newNode.deviceId = '' + new Date().getTime() * Math.random();
            newNode.setBound(
                (e.layerX ? e.layerX : e.offsetX) -
                    _this.scene.translateX -
                    this.config.defaultWidth / 2,
                (e.layerY ? e.layerY : e.offsetY) -
                    this.scene.translateY -
                    this.config.defaultHeight / 2,
                120,
                40
            );
            newNode.text = text;
            console.log('传递的节点文字', text);
            newNode.dataType = type;
            if (type == 'start') {
                //开始节点
                newNode.fillColor = '34,177,61';
            } else if (type == 'stop') {
                //结束节点
                newNode.fillColor = '216,22,27';
            } else if (type == 'configSing') {
                //配置单次
                newNode.fillColor = '7,105,173';
            } else if (type == 'interSing') {
                //交互单次
                newNode.fillColor = '200,191,232';
            } else if (type == 'dataSing') {
                //数据型单次
                newNode.fillColor = '163,73,164';
            } else if (type == 'dataPers') {
                //数据交互型
                newNode.fillColor = '63,72,204';
            } else if (type == 'timePers') {
                //周期交互型
                newNode.fillColor = '112,146,190';
            } else if (type == 'userPers') {
                // 用户持续型
                newNode.fillColor = '0,162,232';
            } else if (type == 'process') {
                //无任务节点 -- 灰色
                newNode.fillColor = '195,195,195';
            } else if (type == 'mixture') {
                //多种任务类型
                newNode.fillColor = '7,105,173';
            }
            if (type != 'start' && type != 'stop' && type != 'process') {
                newNode.textPosition = 'Middle_Center'; // 文字水平垂直居中
                newNode.setImage(require('../../../../assets/processControl/' + type + '.png'));
            }
            
            this.nodemap[newNode.id] = newNode
            
            this.scene.add(newNode);
        },
        drop(event) {
            if (event.dataTransfer.getData('dataType')) {
                this.createNodeData(event, event.dataTransfer.getData('dataType'));
            } else {
                this.$Message.info('请拖拽文字或者图片');
            }
        },
        showKindofTask(taskType, taskId) {
            // console.log('创建任务');
            return;
            let _this = this;
            if (taskType == 'access') {
                if (!_this.componentsObj.loadingUserBtn) {
                    _this.componentsObj.loadingUserBtn = true;
                    setTimeout(() => {
                        _this.$refs.user.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.user.createFlagTask(taskId);
                }
            } else if (taskType == 'vm_metadata') {
                if (!_this.componentsObj.loadingMetadataBtn) {
                    _this.componentsObj.loadingMetadataBtn = true;
                    setTimeout(() => {
                        _this.$refs.metadata.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.metadata.createFlagTask(taskId);
                }
            } else if (taskType == 'qga_write') {
                if (!_this.componentsObj.loadingWriteBtn) {
                    _this.componentsObj.loadingWriteBtn = true;
                    setTimeout(() => {
                        _this.$refs.writeBtn.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.writeBtn.createFlagTask(taskId);
                }
            } else if (taskType == 'qga_execute_cmd') {
                if (!_this.componentsObj.loadingVmcmdBtn) {
                    _this.componentsObj.loadingVmcmdBtn = true;
                    setTimeout(() => {
                        _this.$refs.vmcmd.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.vmcmd.createFlagTask(taskId);
                }
            } else if (taskType == 'once_server_flag') {
                // _this.$refs.flagVmOnce.taskDeail(taskId)
                if (!_this.componentsObj.loadingFlagVmOnceBtn) {
                    _this.componentsObj.loadingFlagVmOnceBtn = true;
                    setTimeout(() => {
                        _this.$refs.flagVmOnce.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.flagVmOnce.createFlagTask(taskId);
                }
            } else if (taskType == 'once_configure_flag') {
                if (!_this.componentsObj.loadingFlagOutBtn) {
                    _this.componentsObj.loadingFlagOutBtn = true;
                    setTimeout(() => {
                        _this.$refs.flagOut.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.flagOut.createFlagTask(taskId);
                }
            } else if (taskType == 'stop_task') {
                // _this.$refs.stopTask.taskDeail(taskId)
                if (!_this.componentsObj.loadingStopTaskBtn) {
                    _this.componentsObj.loadingStopTaskBtn = true;
                    setTimeout(() => {
                        _this.$refs.stopTask.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.stopTask.createFlagTask(taskId);
                }
            } else if (taskType == 'once_submit_flag') {
                // _this.$refs.flagComOnce.taskDeail(taskId)
                if (!_this.componentsObj.loadingFlagComOnceBtn) {
                    _this.componentsObj.loadingFlagComOnceBtn = true;
                    setTimeout(() => {
                        _this.$refs.flagComOnce.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.flagComOnce.createFlagTask(taskId);
                }
            } else if (taskType == 'once_report') {
                // _this.$refs.reportComOnce.taskDeail(taskId)
                if (!_this.componentsObj.loadingReportComOnceBtn) {
                    _this.componentsObj.loadingReportComOnceBtn = true;
                    setTimeout(() => {
                        _this.$refs.reportComOnce.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.reportComOnce.createFlagTask(taskId);
                }
            } else if (taskType == 'customize') {
                // _this.$refs.custom.taskDeail(taskId)
                if (!_this.componentsObj.loadingCustomBtn) {
                    _this.componentsObj.loadingCustomBtn = true;
                    setTimeout(() => {
                        _this.$refs.custom.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.custom.createFlagTask(taskId);
                }
            } else if (taskType == 'train') {
                if (!_this.componentsObj.loadingTrainBtn) {
                    _this.componentsObj.loadingTrainBtn = true;
                    setTimeout(() => {
                        _this.$refs.train.taskDeail(taskId);
                    }, 300);
                } else {
                    _this.$refs.train.taskDeail(taskId);
                }
            } else if (taskType == 'qga_read') {
                // _this.$refs.onceReadFile.taskDeail(taskId)
                if (!_this.componentsObj.loadingOnceReadFileBtn) {
                    _this.componentsObj.loadingOnceReadFileBtn = true;
                    setTimeout(() => {
                        _this.$refs.onceReadFile.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.onceReadFile.createFlagTask(taskId);
                }
            } else if (taskType == 'once_capture') {
                // _this.$refs.oncecapture.taskDeail(taskId)
                if (!_this.componentsObj.loadingOncecaptureBtn) {
                    _this.componentsObj.loadingOncecaptureBtn = true;
                    setTimeout(() => {
                        _this.$refs.oncecapture.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.oncecapture.createFlagTask(taskId);
                }
            } else if (taskType == 'mirror_flow') {
                // _this.$refs.flowImage.taskDeail(taskId)
                if (!_this.componentsObj.loadingFlowImageBtn) {
                    _this.componentsObj.loadingFlowImageBtn = true;
                    setTimeout(() => {
                        _this.$refs.flowImage.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.flowImage.createFlagTask(taskId);
                }
            } else if (taskType == 'tunnel') {
                // _this.$refs.protocol.taskDeail(taskId)
                if (!_this.componentsObj.loadingProtocolBtn) {
                    _this.componentsObj.loadingProtocolBtn = true;
                    setTimeout(() => {
                        _this.$refs.protocol.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.protocol.createFlagTask(taskId);
                }
            } else if (taskType == 'qga_loop_read') {
                // _this.$refs.loopRead.taskDeail(taskId)
                if (!_this.componentsObj.loadingLoopReadBtn) {
                    _this.componentsObj.loadingLoopReadBtn = true;
                    setTimeout(() => {
                        _this.$refs.loopRead.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.loopRead.createFlagTask(taskId);
                }
            } else if (taskType == 'loop_configure_flag') {
                // _this.$refs.flagOutLoop.taskDeail(taskId)
                if (!_this.componentsObj.loadingFlagOutLoopBtn) {
                    _this.componentsObj.loadingFlagOutLoopBtn = true;
                    setTimeout(() => {
                        _this.$refs.flagOutLoop.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.flagOutLoop.createFlagTask(taskId);
                }
            } else if (taskType == 'loop_capture') {
                // _this.$refs.outband.taskDeail(taskId)
                if (!_this.componentsObj.loadingOutbandBtn) {
                    _this.componentsObj.loadingOutbandBtn = true;
                    setTimeout(() => {
                        _this.$refs.outband.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.outband.createFlagTask(taskId);
                }
            } else if (taskType == 'checker') {
                if (!_this.componentsObj.loadingCheckerBtn) {
                    _this.componentsObj.loadingCheckerBtn = true;
                    setTimeout(() => {
                        _this.$refs.checker.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.checker.createFlagTask(taskId);
                }
            } else if (taskType == 'loop_submit_flag') {
                if (!_this.componentsObj.loadingFlagComLoopBtn) {
                    _this.componentsObj.loadingFlagComLoopBtn = true;
                    setTimeout(() => {
                        _this.$refs.flagComLoop.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.flagComLoop.createFlagTask(taskId);
                }
            } else if (taskType == 'loop_report') {
                if (!_this.componentsObj.loadingReportComLoopBtn) {
                    _this.componentsObj.loadingReportComLoopBtn = true;
                    setTimeout(() => {
                        _this.$refs.reportComLoop.createFlagTask(taskId);
                    }, 500);
                } else {
                    _this.$refs.reportComLoop.createFlagTask(taskId);
                }
            }
        },
        listenStartType(value) {
            console.log(value);
            if (value == 'true') {
                this.disabledStartType = false;
            } else {
                this.disabledStartType = true;
                this.formValidateNodeAttribute.startDelay = 0;
            }
        },
        listenEndType(value) {
            console.log(value);
            if (value == 'true') {
                this.disabledEndType = false;
            } else {
                this.disabledEndType = true;
                this.formValidateNodeAttribute.endDelay = 0;
            }
        },
        getNodeAttribute(nodeId) {
            let _this = this;
            let nodeDefaultAttr = JSON.parse(JSON.stringify(this.nodeDefaultAttr));
            axios({
                url: '/process/nodes/' + nodeId,
            }).then((response) => {
                console.log(response, '222');
                if (response.code == 1) {
                    _this.formValidateNodeAttribute.name = response.data.title;
                    _this.formValidateNodeAttribute.taskNumber = response.data.taskCount;
                    _this.formValidateNodeAttribute.createTime = response.data.created;
                    _this.formValidateNodeAttribute.creator = response.data.creatorName;
                    _this.formValidateNodeAttribute.startType = response.data.autoStart
                        ? 'true'
                        : 'false';
                    _this.formValidateNodeAttribute.startDelay = response.data.autoStartDelay;
                    _this.formValidateNodeAttribute.endType = response.data.autoStop
                        ? 'true'
                        : 'false';
                    _this.formValidateNodeAttribute.endDelay = response.data.autoStopDelay;
                    _this.formValidateNodeAttribute.nodeStatus = response.data.status;
                    _this.formValidateNodeAttribute.nodeStatusText =
                        this.statusObj[response.data.status].label;
                    _this.formValidateNodeAttribute.desc = response.data.description
                        ? response.data.description
                        : '';
                    _this.propertiesData = Object.values(nodeDefaultAttr);
                    _this.listenStartType(_this.formValidateNodeAttribute.startType);
                    _this.listenEndType(_this.formValidateNodeAttribute.endType);
                    if (JSON.stringify(response.data.properties) != '{}') {
                        let nodeDefaultAttrKeys = Object.keys(nodeDefaultAttr);
                        for (let i in response.data.properties) {
                            if (nodeDefaultAttrKeys.includes(i)) {
                                //属于默认属性,选中
                                let obj = this.propertiesData.find((item) => item.key === i);
                                obj['checked'] = response.data.properties[i] == 1 ? true : false;
                            } else {
                                let obj = {};
                                obj['key'] = i;
                                obj['value'] = response.data.properties[i];
                                _this.propertiesData.push(obj);
                            }
                        }
                    } else {
                        // _this.propertiesData = [{
                        //     key:null,
                        //     value:null,
                        // }];
                    }
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        // 开始结束节点点保存时调用函数
        postNodeAttribute() {
            if (!this.formValidateNodeAttribute.name) {
                this.$Message.info('请输入节点名称');
                return;
            }
            let _this = this;
            this.saveNodeAttributeBtn = true;
            this.properties = {};
            if (this.propertiesData.length != 0) {
                let attrData = _this.propertiesData;
                for (let index = 0; index < attrData.length; index++) {
                    const element = attrData[index];
                    if (element.key) {
                        if (element.type === 'default') {
                            if (element.checked) {
                                _this.properties[element.key] = element.value;
                            } else {
                                _this.properties[element.key] = 0;
                            }
                        } else {
                            _this.properties[element.key] = element.value;
                        }
                    }
                }
            }
            // console.log(_this.properties)
            let data = {
                autoStart: _this.formValidateNodeAttribute.startType === 'true' ? true : false,
                autoStop: _this.formValidateNodeAttribute.endType === 'true' ? true : false,
                autoStartDelay: _this.formValidateNodeAttribute.startDelay,
                autoStopDelay: _this.formValidateNodeAttribute.endDelay,
                description: _this.formValidateNodeAttribute.desc,
                nodeType: _this.currentNode.dataType,
                testId: _this.currentSceneId,
                title: _this.formValidateNodeAttribute.name,
                properties: _this.properties,
            };
            axios({
                url: '/process/nodes/' + _this.currentNode.id,
                method: 'PUT',
                data,
            }).then((response) => {
                if (response.code == 1) {
                    _this.$Message.success('修改成功');
                    // 执行修改节点名称保存功能
                    let node = _this.getNodeByKey('id', _this.currentNode.id);
                    node.text = _this.formValidateNodeAttribute.name;
                    // if(_this.formValidateNodeAttribute.name.length > 10){
                    //    var newName = '   '+_this.formValidateNodeAttribute.name.slice(0,10)+'!'+'   '+_this.formValidateNodeAttribute.name.slice(10, 20);
                    //    node.text =  newName
                    // }else{
                    //     node.text =  _this.formValidateNodeAttribute.name
                    // }
                    _this.setNodeImage({ ...data, id: _this.currentNode.id }, node);
                    // console.log(_this.getSceneByKey)
                    _this.saveNodeAttributeBtn = false;
                } else {
                    _this.$Message.error(response.message);
                    _this.saveNodeAttributeBtn = false;
                }
            });
        },
        /**
         * @description: 手动执行节点上的任务
         * @param {type}
         * @return:
         */
        openNextModal(nodeId, type) {
            // 下一步有多步
            this.nextModal = true;
        },
        saveCurSelectStep() {
            return new Promise((resolve, reject) => {
                let data = {
                    orderNo: this.currentNode.level + 1,
                    sceneId: this.currentSceneId,
                    stepId: this.nextStep,
                    stepName: this.nextLevelSteps.find((step) => step.id === this.nextStep).title,
                };
                saveCurSelectStep(data).then(({ code, data, mesage }) => {
                    if (code === 1) {
                        resolve();
                    } else {
                        reject();
                    }
                });
            });
        },
        querySelectSteps() {
            return new Promise((resolve, reject) => {
                querySelectSteps({ sceneId: this.currentSceneId }).then((res) => {
                    let { code, data, message } = res;
                    if (code === 1) {
                        this.selectSteps = data;
                        console.log('保存步骤', data);
                        resolve(data);
                    } else {
                        console.log('保存层级步骤失败', data, message);
                        reject();
                    }
                });
            });
        },
        // 需要选下一步的结束步骤方法
        async stopStep(node) {
            let nodeId = node.id;
            // 如果下一步是手动执行，手动运行下一步
            let next = this.nextLevelSteps.find((step) => step.id === this.nextStep);
            // 结束当前步
            if (
                this.formValidateNodeAttribute.nodeStatus === 'running' ||
                this.formValidateNodeAttribute.nodeStatus === 'waiting_for_stop'
            ) {
                await this.operationNodeRunningAndStop(nodeId, 'end', false);
            }
            // 存储下一步
            await this.saveCurSelectStep();
            // 查询存储的信息
            this.querySelectSteps();
            //开始下一步
            if (!next.autoStart) {
                await this.operationNodeRunningAndStop(this.nextStep, 'run', false, false);
            }
            this.$Message.info('操作成功');
        },
        operationNodeRunningAndStop(nodeId, type, showMessage = true, queryNodeInfo = true) {
            return new Promise((resolve, reject) => {
                let _this = this;
                axios({
                    url: '/process/nodes/' + nodeId + '/operation?action=' + type,
                    method: 'patch',
                }).then((response) => {
                    if (response.code == 1) {
                        // 开始选中的下一步
                        queryNodeInfo && _this.getNodeAttribute(nodeId);
                        showMessage && _this.$Message.success('操作成功');
                        _this.processClearSetinterval = setTimeout(() => {
                            _this.dataQueryInProgress();
                        }, 2000);
                        resolve();
                    } else {
                        _this.$Message.error(response.message);
                    }
                });
            });
        },
        // 步骤回滚
        operationNodeRollback(nodeId) {
            let _this = this;
            axios({
                url: '/process/nodes/' + nodeId + '/rollback',
                method: 'post',
            }).then((response) => {
                if (response.code == 1) {
                    _this.$Message.success('操作成功');
                    _this.getNodeAttribute(nodeId);
                    _this.processClearSetinterval = setTimeout(() => {
                        _this.dataQueryInProgress();
                    }, 2000);
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        /**
         * @description: 双击节点弹出对话框
         * @param {type}
         * @return:
         */
        nodeAttrAndTaskListSwitch(value) {
            console.log(value);
            this.panelName = value;
            if (value == 'attr') {
                this.getNodeAttribute(this.currentNode.id);
                this.savePanel = true;
            } else if (value == 'task') {
                this.getNodeTaskList();
                this.getNodeList(this.currentNode.id);
                this.savePanel = false;
                this.copyMatchNode = '';
            } else {
                // this.getNodeTaskList()
                this.savePanel = false;
                // this.getTriigerData(this.objectData.nodeId)
            }
        },
        getNodeTaskList() {
            let _this = this;
            clearTimeout(_this.nodeSerintervalTimeFun);
            axios({
                url: '/process/tasks?',
                method: 'get',
                params: {
                    testId: _this.currentSceneId,
                    pageIndex: _this.taskCurrentPage,
                    pageSize: _this.taskItemPage,
                    nodeId: _this.currentNode.id,
                    property: 'step',
                    order: 'asc',
                    node: true,
                },
            }).then((response) => {
                if (response.code == 1) {
                    _this.taskData = response.data.items;
                    let runningGroup = response.data.items.filter(
                        (item) =>
                            item.status === 'running' ||
                            item.status === 'starting' ||
                            item.status === 'closing'
                    );
                    console.log(runningGroup);
                    if (runningGroup && runningGroup.length != 0) {
                        if (_this.nodeAttributePanel) {
                            _this.nodeSerintervalTimeFun = setTimeout(() => {
                                _this.getNodeTaskList();
                            }, 2000);
                        } else {
                            clearTimeout(_this.nodeSerintervalTimeFun);
                        }
                    }
                    _this.taskTotal = response.data.total;
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        /**
         * @description: 对单个任务的操作
         * @param {type}
         * @return:
         */
        startAndStopTheTesk(active, taskId) {
            if (!active) {
                return;
            }
            let _this = this;
            console.log('对单个任务的操作');
            axios({
                url:
                    '/process/tasks/' +
                    taskId +
                    '/execute?operation=' +
                    active +
                    '&force=' +
                    (active == 'stop' ? true : false),
                method: 'POST',
            }).then((response) => {
                if (response.code == 1) {
                    _this.$Message.success('操作成功');
                    _this.getNodeTaskList();
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        /**
         * @description: 批量删除任务
         * @param {type}
         * @return:
         */
        deleteManyTask(selection) {
            let _this = this;
            if (_this.selectedData.length == 0) {
                _this.$Message.info('请选择要删除的任务');
            } else {
                axios({
                    url: 'process/tasks/' + this.selectedData.map((item) => item.id).join(','),
                    method: 'DELETE',
                }).then((response) => {
                    if (response.code == 1) {
                        response.data.forEach((item, i) => {
                            if (item.code == 1) {
                                _this.$Message.success('删除成功');
                            } else {
                                _this.$Message.error(item.message);
                            }
                        });
                        _this.getNodeTaskList();
                    } else {
                        _this.$Message.error(response.message);
                    }
                });
            }
        },
        /**
         * @description: 拖动表格
         * @param {type}
         * @return:
         */
        dragTableIndex(index1, index2) {
            console.log(index1 + '==' + index2);
        },
        /**
         * @description: 对任务步骤的上移或者下移
         * @param {type}
         * @return: up or down
         */
        removeTaskStep(taskId, removeType) {
            let _this = this;
            axios({
                url: '/process/tasks/' + taskId + '/' + removeType,
                method: 'PATCH',
            }).then((response) => {
                if (response.code == 1) {
                    _this.getNodeTaskList();
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        deleteTask(taskId) {
            let _this = this;
            axios({
                url: '/process/tasks/' + taskId,
                method: 'DELETE',
            }).then((response) => {
                if (response.code == 1) {
                    if (response.data[0].code == 1) {
                        _this.$Message.success('删除成功');
                        _this.taskData.length === 1 &&
                            _this.taskCurrentPage > 1 &&
                            _this.taskCurrentPage--;
                        _this.getNodeTaskList();
                    } else {
                        _this.$Message.error(response.message);
                    }
                } else {
                    _this.$Message.error(response.message);
                }
            });
        },
        async dataQueryInProgress() {
            let _this = this;
            clearInterval(_this.processClearSetinterval);
            let {
                nodes: storageDateS,
                status: status,
                links: lines,
            } = await this.getEditorData().catch((error) => {
                this.$Message.error(error);
            });
            this.installNodeGroup = [];
            this.runningNodeGroup = [];
            this.complatedNodeGroup = [];
            this.pausedNodeGroup = [];
            this.waitingGroup = [];
            this.waitingForStart = [];
            this.waitingForStop = [];
            let selectNodeGroup = [];
            this.taskStatus = status;
            this.detailParent.setProcessStatus(status);
            if (storageDateS) {
                storageDateS.forEach((item, i) => {
                    let currentNodeTopo = _this.getNodeByKey('id', item);
                    
                    if (currentNodeTopo) {
                        currentNodeTopo.alarm = _this.getScorebyStepid(currentNodeTopo,item,null);
                        
                    }
                    if (
                        item.status == 'initialized' &&
                        item.nodeType != 'pause' &&
                        item.nodeType != 'recovery'
                    ) {
                        //初始状态
                        _this.installNodeGroup.push(item.id);
                    } else if (
                        item.status == 'running' &&
                        item.nodeType != 'pause' &&
                        item.nodeType != 'recovery'
                    ) {
                        //运行中的状态
                        _this.runningNodeGroup.push(item.id);
                    } else if (
                        item.status == 'paused' &&
                        item.nodeType != 'pause' &&
                        item.nodeType != 'recovery'
                    ) {
                        //暂停中的状态
                        _this.pausedNodeGroup.push(item.id);
                    } else if (
                        item.status == 'completed' &&
                        item.nodeType != 'pause' &&
                        item.nodeType != 'recovery'
                    ) {
                        //完成中的状态
                        _this.complatedNodeGroup.push(item.id);
                        // console.log(this.selectSteps,item.id);
                        if (this.selectSteps.find((step) => step.stepId === item.id)) {
                            selectNodeGroup.push(item.id);
                        }
                    } else if (
                        item.status == 'waiting' &&
                        item.nodeType != 'pause' &&
                        item.nodeType != 'recovery'
                    ) {
                        _this.waitingGroup.push(item.id);
                    } else if (
                        item.status == 'waiting_for_start' &&
                        item.nodeType != 'pause' &&
                        item.nodeType != 'recovery'
                    ) {
                        _this.waitingForStart.push(item.id);
                        if (this.selectSteps.find((step) => step.stepId === item.id)) {
                            selectNodeGroup.push(item.id);
                        }
                    } else if (
                        item.status == 'waiting_for_stop' &&
                        item.nodeType != 'pause' &&
                        item.nodeType != 'recovery'
                    ) {
                        _this.waitingForStop.push(item.id);
                        if (this.selectSteps.find((step) => step.stepId === item.id)) {
                            selectNodeGroup.push(item.id);
                        }
                    }
                });
            }
            //清空之前的定时器
            if (_this.timerGroup.length != 0) {
                _this.timerGroup.forEach(function (item, i) {
                    clearInterval(item);
                });
            }
            if (this.installNodeGroup.length != 0) {
                _this.installNodeGroup.forEach(function (item, i) {
                    let currentNodeTopo = _this.getNodeByKey('id', item);
                    if (currentNodeTopo) {
                        currentNodeTopo.alarm = _this.getScorebyStepid(currentNodeTopo,item,null);
                    }
                });
            }
            if (this.runningNodeGroup.length != 0) {
                _this.createClearTimer(_this.runningNodeGroup, 'running');
                _this.runningNodeGroup.forEach(function (item, i) {
                    let currentNodeTopo = _this.getNodeByKey('id', item);
                    if (currentNodeTopo) {
                      
                        currentNodeTopo.alarm = _this.getScorebyStepid(currentNodeTopo,item,'运行中')
                    }
                });
            }
            if (this.pausedNodeGroup.length != 0) {
                _this.pausedNodeGroup.forEach(function (item, i) {
                    let currentNodeTopo = _this.getNodeByKey('id', item);
                    if (currentNodeTopo) {
                   
                      currentNodeTopo.alarm = _this.getScorebyStepid(currentNodeTopo,item,'已暂停')
                    }
                });
            }
            // if(this.waitingForStart.length!=0){
            //     _this.waitingForStart.forEach(function(item,i) {
            //         let currentNodeTopo = _this.getNodeByKey("id",item);
            //         if(currentNodeTopo){
            //         
          //currentNodeTopo.alarm = _this.getScorebyStepid(currentNodeTopo,item,'等待开始')
            //         }
            //     });
            // }
            // if(this.waitingForStop.length!=0){
            //     _this.waitingForStop.forEach(function(item,i) {
            //         let currentNodeTopo = _this.getNodeByKey("id",item);
            //         if(currentNodeTopo){
            //            
          //currentNodeTopo.alarm = _this.getScorebyStepid(currentNodeTopo,item,'等待结束')
            //         }
            //     });
            // }
            if (this.waitingGroup.length != 0) {
                _this.createClearTimer(_this.waitingGroup, 'waiting');
            }
            if (this.complatedNodeGroup.length != 0) {
                _this.complatedNodeGroup.forEach(function (item, i) {
                    let currentNodeTopo = _this.getNodeByKey('id', item);
                    if (currentNodeTopo) {
                       
                        currentNodeTopo.alarm = _this.getScorebyStepid(currentNodeTopo,item,null)
                    }
                });
            }
            selectNodeGroup.forEach((item, i) => {
                let currentNodeTopo = _this.getNodeByKey('id', item);
                if (currentNodeTopo) {
                    
                  currentNodeTopo.alarm = _this.getScorebyStepid(currentNodeTopo,item,'已选择')
                }
            });
            _this.createCompletedNodeStyle(storageDateS);
            //展示线的变化
            // let lines = response.data.links;
            if (_this.waitingForStart.length != 0) {
                let arr = [];
                for (let i = 0; i < _this.waitingForStart.length; i++) {
                    function getNode(links, nodeId) {
                        for (let j = 0; j < links.length; j++) {
                            if (links[j].target == nodeId) {
                                arr.push(links[j].source);
                                getNode(links, links[j].source);
                            }
                        }
                    }
                    getNode(lines, _this.waitingForStart[i]);
                }
                lines.forEach(function (item, i) {
                    let oLine = item.oId;
                    let topologyLine = _this.getLinekByKey('id', item.id);
                    if (arr.indexOf(item.source) != -1) {
                        if (topologyLine) {
                            // 试验结束后线的颜色---灰色
                            topologyLine.strokeColor = '201,201,202';
                        }
                    } else {
                        if (topologyLine) {
                            // 试验开始前线的颜色---绿色
                            topologyLine.strokeColor = '56,183,81';
                        }
                    }
                });
            } else {
                lines.forEach(function (item, i) {
                    let oLine = item.oId;
                    let topologyLine = _this.getLinekByKey('id', item.id);
                    //					console.log(topologyLine+"==="+oLine)
                    if (_this.complatedNodeGroup.indexOf(item.source) != -1) {
                        if (topologyLine) {
                            // 试验结束后线的颜色---灰色
                            topologyLine.strokeColor = '201,201,202';
                        }
                    } else {
                        if (topologyLine) {
                            // 试验开始前线的颜色---绿色
                            topologyLine.strokeColor = '56,183,81';
                        }
                    }
                });
            }

            //判断状态是否正确--停止定时器
            if (
                status != 'running' &&
                status != 'pausing' &&
                status != 'stopping' &&
                status != 'waiting'
            ) {
                clearInterval(_this.processClearSetinterval);
                // alert('-')
            } else {
                _this.processClearSetinterval = setTimeout(() => {
                    _this.dataQueryInProgress();
                }, 2000);
            }
        },
        createCompletedNodeStyle(idGroup) {
            let _this = this;
            let currentNodeTopo = null;
            idGroup.forEach(function (item, i) {
                currentNodeTopo = _this.getNodeByKey('id', item.id);
                if (currentNodeTopo) {
                    if (item.status == 'initialized') {
                        //未完成
                        currentNodeTopo.borderWidth = 0;
                    } else {
                        //完成
                        currentNodeTopo.borderWidth = 1;
                    }
                }
            });
        },
        createClearTimer(idGroup, type) {
            let _this = this;
            let _type = type;
            function timer(a, b) {
                if (!a) {
                    return;
                }
                // 导调流程步骤状态
                b = setInterval(function () {
                    if (
                        a.alarm == '进行中。。。' ||
                        a.alarm == '等待中。。。' ||
                        a.alarm == '暂停中。。。'
                    ) {
                        a.alarm = null;
                    } else {
                        if (_type == 'running') {
                            a.loading = '进行中。。。';
                        } else if (_type == 'waiting') {
                            a.alarm = '等待中。。。';
                        } else if (_type == 'pausing') {
                            a.alarm = '暂停中。。。';
                        }
                    }
                }, 1000);
                _this.timerGroup.push(b);
            }
            //获得拓扑上的节点
            let currentNodeTopo;
            idGroup.forEach(function (item, i) {
                if (item) {
                    currentNodeTopo = _this.getNodeByKey('id', item);
                }
                if (currentNodeTopo) {
                    timer(currentNodeTopo, item);
                }
            });
        },
        cancel() {},
        getMsgFormSon(data) {
            this.propertiesData = data;
        },
        refreshTaskStatus() {
            this.dataQueryInProgress();
            this.$Message.success('刷新成功');
        },
        getCompeteSummarize() {
            return new Promise((resolve, reject) => {
                getCompeteSummarize({ sceneId: this.$route.query.id, type: 'processPic' })
                    .then(({ code, data, message }) => {
                        if (code === 1) {
                            this.hasProcessPic = data.total > 0 ? true : false;
                            resolve(this.hasProcessPic);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            });
        },

         async getCompeteSummarizeScore() {
           let res = await getCompeteSummarize({ sceneId: this.$route.query.id, type: 'scoreRecord' })
              let { code, data, message } = res
              if (code === 1) {
                    let list = (data && data.items)||[]
                console.log('----分数的信息啊啊啊啊----',list)
                list.forEach(item=>{
                  let stepId = item.stepId
                  this.step2Scoreid[stepId] = item
                })
              }
        },
        getScorebyStepid(currentNodeTopo,stepId,status){
          if((!status) && currentNodeTopo.data && currentNodeTopo.data && currentNodeTopo.text!=''){
            status = currentNodeTopo.data.statusCnName
          }
          //console.log('-----currentNodeTopo-----',currentNodeTopo)
          if(this.step2Scoreid && this.step2Scoreid[stepId]){
            status = status?(status+'/'):''
            let score = this.step2Scoreid[stepId].score+""
            if(score==='null' ||score==='undefined'){
              return status
            }
            
            return status + score+'分'
          }
          return status
        },


      
      
      
        async upload() {
            let hasProcessPic = await this.getCompeteSummarize();
            if (hasProcessPic) {
                return;
            }
            let file = this.toImg();
            console.log(file);
            let formData = new FormData();
            formData.append('file', file);
            this.axios({
                method: 'post',
                url: `/api/minio/upload/permanent?visibility=company&bucket=images&type=images`,
                data: formData,
                headers: {
                    'Content-type': 'multipart/form-data',
                },
                timeout:0
            })
                .then((res) => {
                    if (res.data.code == 1) {
                        let filePath = res.data.data;
                        let { fileId, originalName: fileName } = res.data.info;
                        saveSummarize({
                            type: 'processPic',
                            fileId: fileId,
                            fileName: fileName,
                            name: fileName,
                            path: filePath,
                            sceneId: this.currentSceneId,
                        });
                    } else {
                    }
                })
                .catch((err) => {});
        },
        toImg() {
            let type = 'image/png';
            // let canvas = document.getElementById('drawCanvasTeaskNew');
            let canvas = document.getElementById('drawCanvasTeaskNewForDownloadImg');
            let imgData = canvas.toDataURL(type);
            let image = new Image();
            image.src = imgData;
            let blob = this.base64toFile(imgData, 'process');
            return blob;
        },
        base64toFile(dataurl, filename = 'file') {
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let suffix = mime.split('/')[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], `${filename}.${suffix}`, {
                type: mime,
            });
        },
        filterTaskType(taskType) {
            let _text = '';
            switch (taskType) {
                case 'loop_capture':
                    _text = '循环带外采集';
                    break;
                case 'loop_configure_flag':
                    _text = 'Flag更新';
                    break;
                case 'tunnel':
                    _text = '数据通道';
                    break;
                case 'qga_loop_read':
                    _text = '循环读取';
                    break;
                case 'mirror_flow':
                    _text = '流量镜像';
                    break;
                case 'once_capture':
                    _text = '单次带外采集';
                    break;
                case 'qga_read':
                    _text = '单次读取';
                    break;
                case 'customize':
                    _text = '自定义任务';
                    break;
                case 'train':
                    _text = '训练任务';
                    break;
                case 'once_report':
                    _text = '报告单次提交';
                    break;
                case 'once_submit_flag':
                    _text = 'Flag单次提交';
                    break;
                case 'stop_task':
                    _text = '停止任务';
                    break;
                case 'once_configure_flag':
                    _text = 'Flag单次写入';
                    break;
                case 'once_server_flag':
                    _text = 'Flag服务器';
                    break;
                case 'qga_execute_cmd':
                    _text = '执行命令';
                    break;
                case 'qga_write':
                    _text = '文件写入';
                    break;
                case 'vm_metadata':
                    _text = '元数据';
                    break;
                case 'access':
                    _text = '人员配置';
                    break;
                case 'checker':
                    _text = 'checker任务';
                    break;
                case 'loop_submit_flag':
                    _text = 'Flag多次提交';
                    break;
                case 'loop_report':
                    _text = '报告多次提交';
                    break;
                case 'EYDD':
                    _text = '操作任务';
                    break;
                default:
                    break;
            }
            return _text;
        },
    },
};
</script>

<style>
.modeRight2 {
    position: absolute;
    width: 191px;
    display: none;
    background-color: #ffffff;
    border: 1px solid #ddd;
    cursor: pointer;
    border-radius: 5px;
}
.modeRight2 > div {
    height: 33px;
    line-height: 33px;
    padding-left: 17px;
    text-align: left;
}
#contextBodyTaskPcNew {
    position: relative;
    height: 500px;
    /* 导调流程的背景图 */
    background: url('../../../../assets/processControl/B2.png');
}
.opertionVm .ivu-select-arrow {
    right: 2px;
}
.opertionVm .ivu-select-selection {
    border-radius: 0px 4px 4px 0px;
}
.taskConfigerName {
    display: inline-block;
    text-align: left;
    word-wrap: break-word;
    word-break: break-all;
    width: 150px;
}
.taskName {
    display: block;
    width: 200px;
    text-align: left;
    word-wrap: break-word;
    word-break: break-all;
}
.taskType {
    display: inline-block;
    width: 150px;
    text-align: left;
}

.demo-split {
    height: 100%;
    border: 1px solid #dcdee2;
}
.demo-split-pane {
    padding: 10px;
}
.ivu-steps.ivu-steps-small .ivu-steps-title {
    color: #fff !important;
}
</style>
<style scoped>
.ivu-steps.ivu-steps-small .ivu-steps-title {
    color: #fff !important;
}
.rightTaskZone {
    position: absolute;
    top: 30%;
    right: 0px;
    margin-right: 16px;
}
/* 分割线 */
.ivu-divider-horizontal {
    display: block;
    height: 1px;
    width: 100%;
    min-width: 100%;
    margin: 0px 0;
    clear: both;
}

.rightNav {
    padding: 8px 6px;
    writing-mode: vertical-lr;
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    cursor: pointer;
}
.activeRightNav {
    border: 1px solid #2d8cf0;
    color: #2d8cf0;
    border-radius: 3px;
    background-color: transparent;
}
</style>
